Using Wheelnav with a Meteor-React Project

help
1

Hello. I added wheelnav to my React project from Atmosphere:

$ meteor add swemyss:wheelnav

Then in my component I tried this using the package’s sample code, but I cannot get it to work. I’m not sure where to put my code with React…

MyWheelComponent = React.createClass({
  renderWheel() {
    var myWheelnav = new wheelnav(“divWheelnav");
    myWheelnav.slicePathFunction = slicePath().WheelSlice;
    myWheelnav.colors = colorpalette.parrot;
    myWheelnav.createWheel([icon.smile, icon.star, icon.fork, icon.$]);
    return (
      <div id="divWheelnav"></div>
    );
  },
  render() {
    return(
      <div>
        { this.renderWheel() }
      </div>
    );
  }
});
2

Try using the React componentDidUpdate lifecycle method. Here’s a working example (I’ve put the code here as well):

wheelnav.html:

<head>
  <title>wheelnav</title>
</head>

<body>
  <div id="render-target"></div>
</body>

wheelnav.jsx:

if (Meteor.isClient) {
  Meteor.startup(function () {
    ReactDOM.render(<App />, document.getElementById('render-target'));
  });
}

wheelnav.css:

#wheelnav {
  height: 200px;
  width: 200px;
}

App.jsx:

App = React.createClass({

  componentDidMount() {
    const myWheelnav = new wheelnav('wheelnav');
    myWheelnav.slicePathFunction = slicePath().DonutSlice;
    myWheelnav.colors = new Array('mediumorchid', 'royalblue', 'darkorange');
    myWheelnav.createWheel([icon.github, icon.people, icon.smile]);
  },

  render() {
    return (
      <div id="wheelnav"></div>
    );
  }

});