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: 5 months 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 (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-03-05T14:13:16.000Z (over 2 years ago)
- Last Synced: 2025-01-27T20:40:51.417Z (6 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/)
## 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)