JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 6
  • Score
    100M100P100Q35476F
  • License ISC

Create interactive particle effects from an image.

Package Exports

  • react-image-particles
  • react-image-particles/build/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-image-particles) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-image-particles

A React component that converts any image into interactive particles.

Example

Installation

Using npm: npm install react-image-particles

Using yarn: yarn add react-image-particles

Usage

import React from 'react';
import ImageToParticle from 'react-image-particles';

const App = () => {
  return (
    <ImageToParticle
      path="path/to/image"
      width={500}
      height={500}
    />
  );
};

export default App;

Props

The <ImageToParticle> component accepts the following props:

  • path (string) required: Image to apply the effect to.
  • width (number) optional: Width of the image canvas in pixels.
  • height (number) optional: Height of the image canvas in pixels.
  • particleSize (number) optional: Size of each particle in pixels.
  • numParticles (number) optional: Number of particles to use. Defaults to the number of pixels in the image.

Author

Samuel Henderson

Contributions are welcome! Repo: https://github.com/samzi123/react-image-particles

License

MIT