how can i use planetary in react

[tcsecchen]

i need to use plantaryjs in react,how can i do it?

[christiannaths]

I've got it working by just using componentDidMount lifecycle function. This minimal example seems to be working so far for me:

import React from 'react';
import * as Planetaryjs from 'planetary.js';
import worldData from 'planetary.js/dist/world-110m.json';

class Globe extends React.Component {
  componentDidMount() {
    const planet = Planetaryjs.planet();
    const canvas = document.getElementById('globe');

    planet.loadPlugin(
      Planetaryjs.plugins.earth({
        topojson: { world: worldData },
        oceans: { fill: 'whitesmoke' },
        land: { fill: 'silver' },
        borders: { stroke: 'silver' },
      })
    );

    // load the pings plugin
    planet.loadPlugin(Planetaryjs.plugins.pings());

    // load the drag plugin
    planet.loadPlugin(Planetaryjs.plugins.drag());

    planet.projection.scale(50).translate([50, 50]);
    planet.draw(canvas);
  }

  render() {
    return (
      <div>
        <canvas id="globe" width="100px" height="100px" />
      </div>
    );
  }
}

export default Globe;

[christiannaths]

Oh, I should say, the example above is dependent on this PR though: https://github.com/BinaryMuse/planetary.js/pull/23

[BinaryMuse]

v1.1.3 should allow the above.