react-thanos-grove

Make the naping animation in Google Thanos Easter Egg as react component.

Please refer the example here for more information.

Installation

npm i react-thanos-grove

Components

• ThanosGrove

  Snap animation by thanos's grove

  | props | type | required | default | description | | --- | --- | --- | --- | --- | | className | string | false | - | Custom class name of the wrap component | | onDecimation | function | false | - | callback function which run with decimate | | onReverse | function | false | - | callback function which run with reverse |

Way to Ride

• Common jS

// import from package entry point
const uc = require('react-thanos-grove')
require('react-thanos-grove/css/style.css')

  <uc.ThanosGrove {...props} />

// only import specific component
const ThanosGrove = require('react-thanos-grove/lib/components/ThanosGrove')
require('react-thanos-grove/css/components/ThanosGrove/style.css')

  <ThanosGrove {...props} />

• ESM

// import from package entry point
import { ThanosGrove } from 'react-thanos-grove'
import 'react-thanos-grove/css/style.css'

  <ThanosGrove {...props} />

// only import specific component
import ThanosGrove from 'react-thanos-grove/es/components/ThanosGrove'
import 'react-thanos-grove/css/components/ThanosGrove/style.css'

  <ThanosGrove {...props} />

Development by storybook

npm install
npm start storybook

• configuration files list in .storybook directory
• story files list in .stories directory

Test

npm run test

• __tests__
  • unit test running by jest
  • use test:update to update jest snapshot