add SVGAnim as child in React component?

[thebarge]

Hi- I've gotten the very basics of using a SnapSVGAnimation within React up and running (in a hacky way):

import React, { Component } from 'react';
import fileData from './assets/snap_asset.json';
/* eslint-disable import/no-webpack-loader-syntax */
const Snap = require( "imports-loader?this=>window,fix=>module.exports=0!snapsvg/dist/snap.svg.js" );
/* eslint-enable import/no-webpack-loader-syntax */
class SVGAnimator extends Component {
  render() {
    const comp = new window.SVGAnim(fileData, 269, 263, 24);
    console.log(comp);
    console.log(comp.s.node);
    return (<div>
      </div>
    );
  }
}

export default SVGAnimator;

But unfortunately, in this implementation, as soon as I instantiate comp, the SVG animation is immediately added to the DOM, outside the scope of my component. How can I add the SVG that comp creates in to what render() returns? I can see the SVG data is at comp.s.node, is that the key somehow? I'm still getting up to speed with React, apologies if I am missing something easy. Thanks!

[Friends-for-Brands]

Hi,

We're are dealing with almost the same issues. Maybe we can help each other?

Few questions; Where is your SVGAnimator.min.js file located in your file? Did you rendered a working svg animation to the browser allready? Can you send us a link to your code?

We're currently in this stage as you can read on stackoverflow: https://stackoverflow.com/questions/45691083/snapsvganimator-js-generates-errors-when-loading-in-react-web-app

[thebarge]

Hi- I saw your question, I was gonna chime in. I can't share my code yet but, here's the relevant portion of the folder structure that I'm using:

|____public
| |____favicon.ico
| |___index.html
| |___libs
|   |____SnapSVGAnimator.min.js
|____src
| |____App.css
| |____App.js
| |____App.test.js
| |____assets
| | |____snap_asset.json
| |____index.css
| |____index.js
| |____logo.svg
| |____registerServiceWorker.js
| |____SVGAnimator.js

and I am loading SnapSVGAnimator in a very old-fashioned way, by using a script tag in my index.html file: <script src="%PUBLIC_URL%/libs/SnapSVGAnimator.min.js"></script> The code I quoted from in my question is in the SVGAnimator file btw.

( My React setup is based on the excellent https://github.com/facebookincubator/create-react-app ) Good luck!

[Friends-for-Brands]

Hi,

Tnx for the input. With the above input, and some minor changes I was able to reproduce your problem in my create-react-app environment. I'm still looking for a proper solution but we added some changes as you can see below. We're trying to use a Async approach because thats the way Animate.cc outputs the animated SVG in an html file.

Our main issue is that when you async load the snapsvg json file. SVGAnimator() is undefined.

Here's our code:

//file SVGAnimator.jsx

/*Snapsvg-cjs works out of the box with webpack*/
import Snapsvg from 'snapsvg-cjs';
import axios from 'axios';

/*json file located in public folder(ugly approach)*/
let jsonfile = "snapsvg.json";

class SVGAnimator extends Component {

  constructor(props){
    super(props);
    this.state = {
      gotJson: false,
      data: ''
    }
  }

  componentDidMount(){
    axios.get(jsonfile)
      .then(response => {
        const json = response.request.responseText;
        console.log(json)
        this.setState({
          gotJson: true,
          data: json
        })

      });
  }

  getSVG(){
    if (this.state.gotJson && this.state.data) {
      const comp = new SVGAnim(this.state.data, 269, 263, 24);
    }
  }

  render() {
    return(
      <div>
         {this.getSVG()}
      </div>
    )
  }
}

export default SVGAnimator;

[thebarge]

This is a much cleaner view -- thanks for those changes. It still has the original problem though, right? i.e., your SVG is not inside the div controlled by the SVGAnimator Component, is it?

[Friends-for-Brands]

Hi,

We've found a working solution. I've created an example in create-react-app Follow the link to grab the idea snapsvg-react-example

Grtz,

Willem-Daan