CODEWITHSUNDEEP
reactjssvgparametersattributescomponents
VVK
VVK

Reputation: 445

ReactJS Pass different set of attributes at render function

I have a ReactJS component:

class OneComponent extends React.Component {
    
  constructor(props_) {
       
    super(props_);
          
    this.width = 600;
    this.height = 600;
    this.viewBox = "0 0 600 600";
    this.preserveAspectRatio = "xMidYMid meet";
    this.responsive = true;
         
  }

  render () {
                 
    let this_ = this;
  
    return (
        
        <div ref={(divElement) => this.divElement = divElement}>
            <svg id={this.prefix} width={this.width} height={this.width} xmlndes='http://www.w3.org/2000/svg' xmlnsXlink='http://www.w3.org/1999/xlink'>
                <g id="svgContent">
                </g>
          </svg>
        </div>

        )
  }
    
}

export default OneComponent;

As you can see the SVG element has width and height parameters:

<svg id={this.prefix} width={this.width} height={this.width} xmlndes='http://www.w3.org/2000/svg' xmlnsXlink='http://www.w3.org/1999/xlink'>

However, in component parameters I have another attributes viewBox and preserveAspectRatio for responsive version.

In this case, SVG element have to be:

<svg id={this.prefix}viewBox={this.viewBox} preserveAspectRatio={this.preserveAspectRatio} xmlndes='http://www.w3.org/2000/svg' xmlnsXlink='http://www.w3.org/1999/xlink'>

So, can I pass in one case just width and height attributes and in other just viewBox and preserveAspectRatio.

Something like:

this.responsive ? let svgParams = {width: {this.width}, height: {this.height}} : let svgParams = {viewBox: {this.viewBox}, preserveAspectRatio: {this.preserveAspectRatio}}

and

<svg id={this.prefix} {svgParams} xmlndes='http://www.w3.org/2000/svg' xmlnsXlink='http://www.w3.org/1999/xlink'>

Any suggestions?

Upvotes: 0

Views: 130

Answers (2)

khukho
khukho

Reputation: 476

You could achieve it in ether way.

import React from "react";
import "./styles.css";

class OneComponent extends React.Component {
  constructor(props_) {
    super(props_);
    this.width = 600;
    this.height = 600;
    this.viewBox = "0 0 600 600";
    this.preserveAspectRatio = "xMidYMid meet";
    this.responsive = true;
  }

  prepareSvg() {
    return this.responsive
      ? { width: this.width, height: this.height }
      : { viewBox: this.viewBox, preserveAspectRatio: this.preserveAspectRatio };
  }

  render() {
    return (
      <div ref={(divElement) => (this.divElement = divElement)}>
        <svg
          id={this.prefix}
          {...this.prepareSvg()}
          xmlndes="http://www.w3.org/2000/svg"
          xmlnsXlink="http://www.w3.org/1999/xlink"
        >
          <g id="svgContent"></g>
        </svg>
        <h1>hello</h1>
      </div>
    );
  }
}

export default OneComponent;

Upvotes: 1

Hassaan Tauqir
Hassaan Tauqir

Reputation: 2742

Yes you can pass props conditionally, try this.

const svgParams = this.responsive
  ? { width: this.width, height: this.height }
  : { viewBox: this.viewBox, preserveAspectRatio: this.preserveAspectRatio };

And then pass svgParams as props using spread operator

<svg {...svgParams} id={this.prefix} xmlndes='http://www.w3.org/2000/svg' xmlnsXlink='http://www.w3.org/1999/xlink'>

Upvotes: 3

Related Questions