react-zest v0.2.3

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

Animation-Specific Defaults

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!