material-ripple-effects
v2.0.1
Published
Material Design Ripple Effects
Downloads
226,260
Maintainers
Readme
material-ripple-effects
Material Design Ripple Effects.
material-ripple-effects makes you able to have Material Design Ripple Effect on any element you want.
material-ripple-effects comes with two colors:
- Light
- Dark
Installation
Using NPM or Yarn
- Install the material-ripple-effects from npm or yarn.
npm i material-ripple-effects
yarn add material-ripple-effects
- Import the material-ripple-effects in to your project.
import Ripple from 'material-ripple-effects';
- material-ripple-effects works using react events on the element. You need to initialize the Ripple() object first and then use its create() method on the element event.
import React from "react";
import Ripple from 'material-ripple-effects';
export default function Button() {
const ripple = new Ripple();
return (
<>
<button onMouseUp={(e) => ripple.create(e, 'light')>Material Ripple</button>
<button onMouseUp={(e) => ripple.create(e, 'dark')>Material Ripple</button>
</>
);
}
Using CDN
- Add the CDN script of material-ripple-effects in to your HTML file.
<script crossorigin src="https://unpkg.com/material-ripple-effects/ripple.js"></script>
- material-ripple-effects cdn works using the data attribute on the element, set the
data-ripple-light
ordata-ripple-dark
on the element you want to have material design ripple effect.
<button data-ripple-light="true">Material Ripple</button>
<button data-ripple-dark="true">Material Ripple</button>