https://github.com/rwu823/react-ripples

:swimmer: Material ripple effect. Ripples everything
https://github.com/rwu823/react-ripples

button material react ripple

Last synced: 6 days ago
JSON representation

:swimmer: Material ripple effect. Ripples everything

• Host: GitHub
• URL: https://github.com/rwu823/react-ripples
• Owner: rwu823
• License: mit
• Created: 2016-06-04T13:03:47.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2023-12-15T02:38:31.000Z (about 1 year ago)
• Last Synced: 2025-01-12T11:09:01.447Z (14 days ago)
• Topics: button, material, react, ripple
• Language: TypeScript
• Homepage: https://rwu823.github.io/react-ripples
• Size: 4.63 MB
• Stars: 200
• Watchers: 3
• Forks: 19
• Open Issues: 24
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-fe-resources - react-ripples

README

        


  

  
react-ripples

  

    

  




  

    

  

  

    

  

  





  Material ripple effect, ripples everywhere





  Live Demo



## Attraction

- ✅ Zero dependencies

- 🚀 Tiny and blazing fast (Pure Component)

- ⚡ Typescript and definition file supported

- 🎨 Pure CSS animation

- 🌍 SSR supported

## Installation

```sh

$ npm install --save react-ripples

```

or

```sh

$ yarn add react-ripples

```

## Usage

```jsx

import Ripples from 'react-ripples'

render() {

  

    Ripple Button

  

}

```

## API

### createRipples([defaultProps])

Extends default props without HOC

```jsx

import { createRipples } from 'react-ripples'

const MyRipples = createRipples({

  color: 'purple',

  during: 2200,

})

```

### Props

```javascript

static propTypes = {

  during: PropTypes.number,

  color: PropTypes.string,

}

static defaultProps = {

  during: 600,

  color: 'rgba(0, 0, 0, .3)',

}

```

| Property | Description                   |

| -------- | ----------------------------- |

| during   | The css animate duration [ms] |

| color    | The ripple's background color |