ripple-effects v1.0.2

Ripple Effect

You can add ripple effect to your website with just single line of code

View Demo Here

DOCS

• Installation
• Usage
• Examples
• API
• How to use it on frameworks

Installation

NPM

npm i ripple-effects

Unpkg (4kb)

<script src="https://unpkg.com/ripple-effects"></script>

Unpkg Unbabel Version (3kb) - IE Not Supported

<script src="https://unpkg.com/ripple-effects"></script>

Usage

import ripple "ripple-effects";

ripple(".card");
// with option

ripple(".card",{
  background: "yellow",
  triggerExcept: "button", // BUtton children of the card will not cause a trigger to the ripple
})

NOTE: Self closing tag is not allowed you need to wrap it

Examples

const elements = document.querySelectorAll('.card')
ripple(elements, {
  background: 'radial-gragiend(white,black)',
  opacity: 0.4,
  triggerExcept: 'button', // BUtton children of the card will not cause a trigger to the ripple
})

const body = document.body

ripple(body, {
  background: 'white',
})

// You can also access the utilities that i use

console.log(ripple.utils)

How to use it on frameworks

React

import React, { useEffect, useRef } from 'react'
import ripple from 'ripple-effects'
const buttonRipple = () => {
  const button = useRef(null)

  useEffect(() => {
    ripple(button.current)
    // or
    ripple('.btn')
  }, [])
  return (
    <button ref={button} className="btn btn-primary">
      Ripple
    </button>
  )
}

Svelte

<script>
  import ripple from 'ripple-effects'
</script>

<button use:ripple>Ripple</button>

API

ripple(element, option?)