React Component for drawing constellations, wrapping Constellation Sketcher
Static screenshot:
npm install --save react-constellation-sketcherimport React, { Component } from 'react'
import ConstellationSketcher from 'react-constellation-sketcher'
class Example extends Component {
render() {
return <ConstellationSketcher width="500"
height="500"
slideshow={true}
...
/>
}
}Every configuration option in the underlying library maps to a React prop---just remove the "set" prefix and make the first letter lowercase. The animated prop replaces the setAnimated function, drawLines replaces setDrawLines, etc. The only differences are:
setCrossFadeandsetFadeInare broken into the propscrossFade,crossFadeTime,fadeIn, andfadeInTime.- Random selection weights are set via the
weightsprop, which should be set to an object where the keys are some or all ofall,popular,striking,medium, orsmall. E.g.weights={{'all': 0, 'striking': 1}}will ensure only striking constellations are chosen, andweights={{'medium': 0}}will block medium constellations from being chosen while leaving the other categories at their default weights.
The width and height props control the size of the component (square aspect ratios are recommended), and the style and className props are passed through to the underlying <canvas> element.
The constellation prop sets the constellation to be shown (or the first constellation for a slideshow). If not given, a random constellation is chosen.
The slideshow prop sets whether successive constellations are shown (default false).
The list of constellation names and the constellation categories are availble:
import ConstellationSketcher, {constellationNames, categories} from 'react-constellation-sketcher'