React Choreograph
npm i -S react-choreograph
react-choreograph
is a tiny wrapper component that gives you a simple interface for toggling CSS class names on/off components. All you do is set it up, and turn it on and off.
Basic Idea
<Choreograph = = => <div = /></Choreograph>
Props
trigger
Boolean value that will trigger class manipulation when toggled.
on
Array of objects modeling which refs should receive which classes when activated.
off
Array of objects modeling which refs should have which classes removed when deactivated.
On/Off Objects
The on/off arrays take this shape:
const moves = ref1: 'class-name-1' ref2: 'class-name-2' delay: 200
The first key should always be the name of the ref and its value the name of the class to apply. The second (optional) key, delay
, instructs the component to delay class manipulation for the set number of milliseconds.
Render Function
The Choreograph
component takes a render function as its only child. The function exposes the setRef
method which allows you to apply refs to arbitrary children. The value passed to each setRef
call should be a valid ref name from the on/off objects.
Example
{ thisstate = active: false } { return <Choreograph = = = > <> <div = ="box" /> <button = > Toggle Transition </button> </> </Choreograph> ; }