Generate Interactive Particles From Images – react-image-particles

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:

Generate Interactive Particles From Images

Download Details:

Author: samzi123

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/samzi123/react-image-particles

License: MIT

Add Comment