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