https://github.com/michioxd/react-ripplejs

Vanilla Material Design Ripple Effect implement for ReactJS
https://github.com/michioxd/react-ripplejs

material material-design mui react ripple ripple-effect ripples

Last synced: 14 days ago
JSON representation

Vanilla Material Design Ripple Effect implement for ReactJS

• Host: GitHub
• URL: https://github.com/michioxd/react-ripplejs
• Owner: michioxd
• License: mit
• Created: 2023-03-05T09:01:17.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-03-05T14:13:16.000Z (almost 2 years ago)
• Last Synced: 2024-11-07T08:41:35.367Z (2 months ago)
• Topics: material, material-design, mui, react, ripple, ripple-effect, ripples
• Language: TypeScript
• Homepage:
• Size: 383 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-ripplejs

Adds Material Design-style feedback ripples to your existing HTML (React components?) without any dependencies. Implemented from [samthor](https://github.com/samthor)'s [rippleJS](https://github.com/samthor/rippleJS) for ReactJS

## Demo

[See the live demo here](https://michioxd.github.io/react-ripplejs/)

![Demo](./preview.gif)

## Requirements

`'react': ^18.0.0`

## Install

Install this package with your favorite package manager

```bash

# npm

npm i react-ripplejs

# pnpm

pnpm i react-ripplejs

# yarn

yarn add react-ripplejs

```

## Usage

```tsx

import Ripple from "react-ripplejs";

const App = () => (

  

    Somthing here brrr

  

);

export default App;

```

### fill

#### `boolean?`

Fill ripple to rounded corners, good for form elements with fixed size.

Default: `false`

### opacity

#### `string?`

Ripple Opacity, example: `0.1`

Default: (empty)

### background

#### `string?`

Ripple Background, example: `red`

Default: (empty)

## License

[MIT License](./LICENSE)

## Credits

React implement by [michioxd](https://github.com/michioxd). Inspired by [samthor](https://github.com/samthor)