React Dust Effect
Convert your React components into dust!
Installation
Yarn
yarn add react-dust-effect
NPM
npm install --save react-dust-effect
Usage
; { const show setShow = ; return <div> <DustEffect src="smaple/image.png" show=show /> <button onClick= >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