0.1.0 • Published 3 months ago

@avioui/ripple-effect v0.1.0

Weekly downloads
-
License
ISC
Repository
github
Last release
3 months ago

- Ripple Effect

Made for those of you who want to make your elements have a Ripple effect

Features:

  • Dynamic color ripple

Uses Instructions:

  1. Install the @avioui/ripple-effect from terminal by npm or yarn.
npm i @avioui/ripple-effect

yarn add @avioui/ripple-effect
  1. Import the @avioui/ripple-effect in to your project.
    import Ripple from '@avioui/ripple-effect'
  1. @avioui/ripple-effect Ripple effect works by using events on elements. You need to initialize the Ripple() object first then use the add() method to get the ripple effect on the component.
    import React from 'react'
    import Ripple from '@avioui/ripple-effect'

    function Example() {

        const ripple = new Ripple()

        return (
            <>
                <button onMouseUp={(e) => ripple.add(e)}>
                    example ripple
                </button>
            </>
        );
    }

    export default Example