https://github.com/filipchalupa/react-ripple-click

Ripple effect for your buttons.
https://github.com/filipchalupa/react-ripple-click

Last synced: 20 days ago
JSON representation

Ripple effect for your buttons.

• Host: GitHub
• URL: https://github.com/filipchalupa/react-ripple-click
• Owner: FilipChalupa
• Created: 2023-11-01T14:08:24.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-05-16T12:48:57.000Z (12 months ago)
• Last Synced: 2025-03-20T08:41:19.275Z (about 1 month ago)
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/react-ripple-click
• Size: 1.34 MB
• Stars: 3
• Watchers: 2
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React ripple click [![npm](https://img.shields.io/npm/v/react-ripple-click.svg)](https://www.npmjs.com/package/react-ripple-click) ![npm type definitions](https://img.shields.io/npm/types/react-ripple-click.svg)

Ripple effect for your buttons. Try interactive [CodeSandbox demo](https://codesandbox.io/s/react-ripple-click-4dmn9l?file=/src/App.js) or [Storybook demo](https://filipchalupa.cz/react-ripple-click/).

![UI example](https://raw.githubusercontent.com/FilipChalupa/react-ripple-click/HEAD/screencast.gif)

## Installation

```bash

npm install react-ripple-click

```

## How to use

```jsx

import { Ripple } from 'react-ripple-click'

import 'react-ripple-click/dist/index.css'

const App = () => {

	return (

		

			

			Click me

		

	)

}

```

### Custom overrides

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

```css

:root {

	--Ripple-custom-opacity: 0.2;

	--Ripple-custom-duration: 0.6s;

	--Ripple-custom-timing-function: ease-in;

	--Ripple-custom-color: currentColor;

}

```