react-choreograph v0.0.1

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
  trigger={this.state.active}
  on={[{ box: 'is-active' }]}
  off={[{ box: 'is-active', delay: 200 }]}
>
  {setRef => <div ref={setRef('box')} />}
</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

class App extends Component {
  constructor(props) {
    super(props)
    this.state = { active: false }
  }
  render() {
    return (
      <Choreograph
        trigger={this.state.active}
        on={[{ box: 'is-active' }]}
        off={[{ box: 'is-active' }]}
      >
        {setRef => (
          <>
            <div ref={setRef('box')} className="box" />
            <button
              onClick={() => this.setState(state => ({
                active: !state.active
              }))}
            >
              Toggle Transition
            </button>
          </>
        )}
      </Choreograph>
    );
  }
}