CODEWITHSUNDEEP
javascripthtmlreactjs
Andrew
Andrew

Reputation: 73

How to change the class of component after period of time?

I am using a component which renders a SVG image but it does not render the fill. I made two classes 

.svg  {
  fill-opacity: 0;


.svg-show {
  fill-opacity: 1;
  transition: fill-opacity 2s;
}

} My question would be how could I apply a classname svg-show to the below component after lets say duration of 200

  <ReactVivus
            className="svg"
            option={{
              file: forever,
              duration: 200,
              animTimingFunction: "oneByOne",
              type: "delayed",
              onReady: console.log
            }}
            callback={console.log}
          />

Upvotes: 0

Views: 65

Answers (2)

narcello
narcello

Reputation: 499

If you want to do with hooks:


import React, {useState, useEffect} from "react";

function Calendar() {
    const [svgShow, setSvgShow] = useState(false);

    useEffect(() => {
        setTimeout(() => {
            setSvgShow(true);
        }, 200);
    }, []);

    return (
        <ReactVivus
            className={svgShow ? "svg-show" : "svg"}
            option={{
                file: forever,
                duration: 200,
                animTimingFunction: "oneByOne",
                type: "delayed",
                onReady: console.log
            }}
            callback={console.log}
        />
    )
}
export default Calendar;

Upvotes: 2

Nicholas Tower
Nicholas Tower

Reputation: 85062

Have a state variable in your component, then pick the class name based on that variable. In a class component, that would look like this:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      show: false,
    }
  }

  componentDidMount() {
    setTimeout(() => this.setState({ show: true}), 200);
  }

  render() {
    return (
      <ReactVivus
        className={this.state.show ? "svg-show" : "svg"}
        option={{
          file: forever,
          duration: 200,
          animTimingFunction: "oneByOne",
          type: "delayed",
          onReady: console.log
        }}
        callback={console.log}
      />
    )
  }
}

Upvotes: 2

Related Questions