react-ripple-click
TypeScript icon, indicating that this package has built-in type declarations

1.2.0 • Public • Published

React ripple click npm npm type definitions

Ripple effect for your buttons. Try interactive CodeSandbox demo or Storybook demo.

UI example

Installation

npm install react-ripple-click

How to use

import { Ripple } from 'react-ripple-click'
import 'react-ripple-click/dist/index.css'

const App = () => {
	return (
		<button
			style={{
				position: 'relative',
				overflow: 'hidden',
				isolation: 'isolate',
			}}
		>
			<Ripple />
			Click me
		</button>
	)
}

Custom overrides

Put to any parent element the following CSS custom properties to override the default ripple effect:

:root {
	--Ripple-custom-opacity: 0.2;
	--Ripple-custom-duration: 0.6s;
	--Ripple-custom-timing-function: ease-in;
	--Ripple-custom-color: currentColor;
}

Package Sidebar

Install

npm i react-ripple-click

Weekly Downloads

216

Version

1.2.0

License

ISC

Unpacked Size

12.2 kB

Total Files

14

Last publish

Collaborators

  • onset