Convert your React components into dust!
yarn add react-dust-effectnpm install --save react-dust-effectimport 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>
);
}- Target Image's src
- Showing state. Effect will trigger when this prop is changed
- Inner img element's props
option.distributionFunc: (hPos: number, vPos: number, canvasIndex: number, canvasNum: number) => number,
Distribution function that defining the number of particles for each layers.
See the
defaultDistributionfunction 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