Description:
react-image-particles is a fancy React component that transforms images into interactive particles.
How to use it:
1. Install & import the component.
# Yarn $ yarn add react-image-particles # NPM $ npm install react-image-particles
import React from 'react'; import ImageToParticle from 'react-image-particles';
2. Add the <ImageToParticle /> component to your app and specify the path to the image as follows:
const App = () => {
return (
<ImageToParticle
path="/path/to/image"
/>
);
};
export default App;3. Availabl options to customize the particles.
- width: Width of the image
- height: Height of the image
- particleSize: Particle size
- numParticles: Number of particles
const App = () => {
return (
<ImageToParticle
path="/path/to/image"
width={500}
height={500}
particleSize{10}
numParticles={1000}
/>
);
};
export default App;Preview:
