React Zest

a lightweight wrapper for adding micro-animations to React components

View the Demo

A small demo is here.

Installation

npm install --save react-zest

or

yarn add react-zest

Usage

Import the Zest component and wrap the element you'd like to animate.

A number of props can be passed to the Zest component to configure the animation. Where available, default settings are recommended.

General Props

Prop	Type	Default	Accepted Values
animationName	string	none	beacon, pulse, wiggle
animationTrigger	string or boolean	click	click, hover, a boolean (see example below)
animationDuration (optional)	number	animation-specific	# of milliseconds, i.e. 300
animationCount (optional)	string	animation-specific	# of animation cycles, i.e. '1'
color (optional)	string	animation-specific	hex, color name, or rgba, i.e. '#C33917'
borderColor (optional)	string	animation-specific	hex, color name, or rgba, i.e. '#C33917'

Animation-Specific Defaults

Animation Name	Default Duration	Additional Default Properties
beacon	300 (ms)	animationCount: '1'
pulse	3000 (ms)	animationCount: 'infinite' color: '#C33917' borderColor: '#C33917' (dark red) (borderColor will default to color or '#C33917' if not specified)
wiggle	1000 (ms)	animationCount: '1'

Basic Example

import React from 'react';
import Zest from 'react-zest';

const SomeComponent = props => {
  return (
    <Zest
      animationName="wiggle"
      animationTrigger="hover"
      animationDuration={700}
    >
      <button>Click here!</button>
    </Zest>
  );
};

export default SomeComponent;

Example - Animating an Input on Error

The pulse animation is ideal for animating an invalid input field. This example takes a boolean value as the animationTrigger.

import React from 'react';
import Zest from 'react-zest';

const SomeComponent = props => {
  constructor(props) {
    super(props);

    this.state = {
      input: '',
      valid: true
    };
  }

  checkValidity() {
    if (this.state.input.length < 3) { return this.setState({ valid: false }); }
    return this.setState({ valid: true });
  }

  return (
    <Zest
      animationName="pulse"
      animationTrigger={!this.state.valid}
    >
      <input
        type="text"
        value={this.state.input}
        onChange={e => this.setState({ input: e.target.value })}
        onBlur={this.checkValidity} />
    </Zest>
  );
};

export default SomeComponent;

Notes

• The wrapped element must have a display value of inline-block or block to have all animations applied.

Contributing

Contributors are expected to follow our Code of Conduct guidelines listed here.

To contribute:

1. Reach out/file an issue if unsure changes are desired.
2. Fork it.
3. Create your feature branch (git checkout -b my-new-feature).
4. Add your changes to the lib or css directories, along with associated tests.
5. Run tests (npm test) and the linter (npm run lint).
6. Commit your changes (git commit -am 'Added some feature').
7. Push to the branch (git push origin my-new-feature).
8. Create new Pull Request.

Testing

To run the test suite: npm test

To run the linter: npm run lint

Still in a live talk!