react-dust-effect
TypeScript icon, indicating that this package has built-in type declarations

0.0.7 • Public • Published

React Dust Effect

Convert your React components into dust!

npm Build Status min minzip

effect start

Installation

Yarn

yarn add react-dust-effect

NPM

npm install --save react-dust-effect

Usage

import React, { useState } from 'react';
import DustEffect from 'react-dust-effect'
 
function App() {
  const [show, setShow] = useState(false);
  return (
    <div>
      <DustEffect src="smaple/image.png" show={show} />
      <button onClick={() => setShow(!show)}>Effect!</button>
    </div>
  );
}

Props

src: (required, string)

  • Target Image's src

show: (required, boolean)

  • Showing state. Effect will trigger when this prop is changed

imgProps: (optional, object, default: {}})

  • Inner img element's props

option: (optional, object, default: {})

option.canvasNum: (number, default: 25)
option.baseDuration: (number, default: 800)
option.outerTimeoutDelay: (number, default: 70)
option.innerTimeoutDelay: (number, default: 110)
option.translateX: (number, default: 100)
option.translateY: (number, default: -100)
option.rotateMin: (number, default: -15)
option.rotateMax: (number, default: 15)
option.blur: (number, default: 1)
option.distributionFunc: (hPos: number, vPos: number, canvasIndex: number, canvasNum: number) => number,

Distribution function that defining the number of particles for each layers.

See the defaultDistribution function on 'src/DustEffect.jsx'

  • hPos: Pixel's position percentage from left (hpos: 0.5 -> pixel located at center column)
  • vPos: Pixel's position percentage from top (vpos: 0 -> pixel located at top row)
  • canvasIndex: Index of the current canvas
  • canvasNum: Total canvas number

Reference

redstapler

Package Sidebar

Install

npm i react-dust-effect

Weekly Downloads

2

Version

0.0.7

License

MIT

Unpacked Size

22.4 kB

Total Files

8

Last publish

Collaborators

  • jiggum