Noble Programming Mantra

    smoke-effect-react

    1.0.5 • Public • Published

    What's this

    A simple broken smoke effect react component. A step in learning three.js with react. Ported from original creator Teo Litto's experiment on codepen https://codepen.io/teolitto/pen/KwOVvL. Demo of the use of this component is at https://github.com/hsyuting/smoke-effect-react-demo.

    Installation

    npm i -S smoke-effect-react
    

    How to use

    Import the package in your React project.

    import SmokeElement from "smoke-effect-react";
    

    Put the component in render and give these properties a value. Important: These properties all require a value for it to work. You can also specify a value width and height properties but must in px atm for it to work.

     <SmokeElement
              src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/95637/quickText.png"
              opacity="1"
              smokeSrc="https://s3-us-west-2.amazonaws.com/s.cdpn.io/95637/Smoke-Element.png"
              smokeOpacity="0.3"
            />
    

    Smoke image used: smoke image

    Example

    A different smoke image used with different opacity settings could give different results. smoke image

    <SmokeElement src="./images/quickText.png"
              opacity="2"
              smokeSrc="./images/smoke_PNG55217.png"
              smokeOpacity="0.2"
              />
    

    Result: smoke over image

    Install

    npm i smoke-effect-react

    DownloadsWeekly Downloads

    18

    Version

    1.0.5

    License

    MIT

    Unpacked Size

    22 kB

    Total Files

    3

    Last publish

    Collaborators

    • hsyuting