react-constellation-sketcher v1.0.1
react-constellation-sketcher
React Component for drawing constellations, wrapping Constellation Sketcher
Static screenshot:
Install
npm install --save react-constellation-sketcher
Usage
import 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:
setCrossFade
andsetFadeIn
are broken into the propscrossFade
,crossFadeTime
,fadeIn
, andfadeInTime
.- Random selection weights are set via the
weights
prop, 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'