2

I'm new to reactJS and I'm trying to make my SVG's animated in React and I am having some issues.

I got vivus from https://www.npmjs.com/package/vivus

import React from "react";
import ReactDOM from "react-dom";
import Vivus from "vivus";

export default class MySkills extends React.Component {
constructor() {
    super();
    new Vivus('my-div', {duration: 200, file: 'link/to/my.svg'});
}

render() {
    return (
        <section id="MySkills" className="mySkills">
            <div className="wrapper">
                <div id="my-div"></div>
            </div>
        </section>
    );
}
}

And this trows me an error. I think that the issue is with constructor, but I am not sure where to put the vivus object?

Error message:

Uncaught Error: Vivus [constructor]: "element" parameter is not related to an existing ID

xoomer
  • 311
  • 2
  • 10
  • 22

1 Answers1

3

You have to initialize your Vivus object after the component has been mounted.

export default class MySkills extends React.Component {
    constructor() {
        super();

    }
    componentDidMount(){
        new Vivus('my-div', {duration: 200, file: 'link/to/my.svg'});
    }    
    render() {
        return (
            <section id="MySkills" className="mySkills">
                <div className="wrapper">
                    <div id="my-div"></div>
                </div>
            </section>
        );
    }
}
QoP
  • 27,388
  • 16
  • 74
  • 74
  • Thank You! Works perfectly! – xoomer Jun 30 '16 at 15:16
  • may i ask what exactly the value of the 'file' property is? I tried several options of linking an svg file including relative paths to the svg file etc., but it did not work out. Got a "Page not found" in the Vivus frame. That'd be awesome. thx! – manpenaloza Dec 14 '16 at 12:18