Narrating Prophetic Monks

    react-dust-effect
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.7 • Public • Published

    React Dust Effect

    Convert your React components into dust!

    npm Build Status min minzip

    effect start

    Installation

    Yarn

    yarn add react-dust-effect

    NPM

    npm install --save react-dust-effect

    Usage

    import 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>
      );
    }

    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

    Reference

    redstapler

    Install

    npm i react-dust-effect

    DownloadsWeekly Downloads

    22

    Version

    0.0.7

    License

    MIT

    Unpacked Size

    22.4 kB

    Total Files

    8

    Last publish

    Collaborators

    • jiggum