Home / Questions / 505489
Accepted
ricardo leiva sikic
Asked: 2022-05-22 10:14:13 +0800 CST 2022-05-22 10:14:13 +0800 CST

Is there a way to pass a dynamic css rule from JS so it can be added in React?

  • 772

I am creating an animation on scrollfrom an svg but with reactand I have the following question, is there any way to pass this dynamic css rule from js:

line.style.strokeDasharray

so that it can be added in react?

class App extends React.Component {
  constructor(props) {
    super(props);
    this.line = React.createRef();
    
  }
  
  componentDidMount = () => {
    let line = this.line.current;
    let lengthLine = line.getTotalLength();

    line.style.strokeDasharray = lengthLine; // Alli iria
  }

  render() {
    return (
      <div className="App">
        <div className="header-previus">
          <h1>Scroll down to show the magic</h1>
        </div>
        <svg width="149" height="562" id="delgada-linea" viewBox="0 0 149 562" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path ref={this.line}  d="M1 1C25.6599 75.33 143.5 121 113.5 192.5C83.5 264 -22.5 320.5 18.5 378C59.5 435.5 185 495.5 137 560.5" stroke="black" strokeWidth="2"/>
        </svg>
      </div>
    );
  }
}

my css:

.App
  & > .header-previus
    height: 800px
    width: 100%
    background: lightblue
    & > h1
      color: #fff
javascript

1 Answers

  1. Best Answer

    I think you are combining as the styles are defined in Reactto as defined in css. When you're doing line.style.strokeDasharray = lengthLine;this you're trying to access the property strokeDasharraythe way Reactit references styles (without hyphens and with camelCase), but you have to remember that by using the direct reference of the DOMyou're trying to access the cssin its actual form in which the property name would be stroke-dasharray.

    Since it's hyphenated you'll need to use square bracket notation to access your property on the object, like so:

     line.style["stroke-dasharray"] = lengthLine;

    I want to add that there are better ways to do this depending on what you want to do in your implementation and if you are learning you should use functional and hooks.

    Hope this helps, good luck programming.

    As a demonstration that the code works correctly and you can change the property dynamically, you can change the one componentDidMountin your code to this:

      componentDidMount = () => {
    let line = this.line.current;

    setInterval(()=>{
      line.style["stroke-dasharray"]++;
    }, 200);
  }

    You will see how the property is changed dynamically.

    • 1