✨ m3ripple
Bring Material 3(You) Ripple Effect to your React projects!
[](https://www.npmjs.com/package/@m_three_ui/m3ripple)
[](#)
[](https://github.com/yuyake-litrain/m3ripple/blob/main/LICENSE)
[](https://npmtrends.com/@m_three_ui/m3ripple)
[](#)
[](https://github.com/yuyake-litrain/m3ripple/actions/workflows/main.yml)
## Features
- ✨ Ripple Effect with sparkle easily realized on the web
- 😍 Well-tuned behavior with no faltering
- 🎨 Highly customizable in terms of ripple color, number of sparkles, clarity, etc.
- ⚡ High speed drawing for Sparkles by canvas
- ✅ Ripple effect in Material 2 is also supported
## Getting Started
### Install
#### Bun
```bash
bun install @m_three_ui/m3ripple
```
#### Others
npm
npm i @m_three_ui/m3ripple
pnpm
pnpm add @m_three_ui/m3ripple
Yarn
yarn add @m_three_ui/m3ripple
### Use
Import `` component(based on ``) and set props.
#### Example
```tsx
import { RippleContainer } from '@m_three_ui/m3ripple'; //import it
import '@m_three_ui/m3ripple/css' // import css
import styles from './some_css_file.module.css';
const YourComponent = () => {
return (
{}}
className = {styles.rippleContainer}
rippleColor = "hsla(29,81%,84%,0.15)"
sparklesColorRGB = "255 255 255"
opacity_level1 = "0.4"
opacity_level2 = "0.1"
sparklesMaxCount = 2048
divProps = {{}}
onMouseDown = {() => {}}
onTouchStart = {() => {}}
onTouchMove = {() => {}}
onMouseUp = {() => {}}
onTouchEnd = {() => {}}
onMouseLeave = {() => {}}
onTouchCancel = {() => {}}
>
);
};
export default YourComponent;
```
|Property|optional|explanation|default|type|
|----|----|----|----|----|
|`isMaterial3`|yes|Whether to use ripple of Material 3|`true`|`boolean`|
|`beforeRippleFn`|yes|A function to be executed when a click occurs and just before the ripple is displayed (used for example to display a button shadow)|`()=>{}`|`(event: React.MouseEvent \| React.TouchEvent) => void`|
|`className`|yes|Since RippleContainer is rendered as a div element, this is the ClassName of that div element.|`""`|`string`|
|`children`|yes|Child Elements of RippleContainer|`undefined`|`ReactNode`|
|`rippleColor`|yes|Ripple Effect Colors. If transparency is not specified, the overlap will not be visible when multiple clicks are made.|`"#ffffff35"`|`string`|
|`sparklesColorRGB`|yes|Specify sparkle color as space-separated RGB. Transparency cannot be specified.|`"255 255 255"`|`string`|
|`opacity_level1`|yes|Transparency just before the sparkle disappears. *The transparency when initially displayed is calculated by the current progress of the Ripple Effect|`"0.2"`|`string`|
|`opacity_level2`|yes|Transparency just before Sparkles disappear.Set after opacity_level1.|`"0.1"`|`string`|
|`sparklesMaxCount`|yes|Total amount of dots representing sparkle.|`2048`|`number`|
|`divProps`|yes|Since the RippleContainer is rendered as a Div element, you can pass Div element Props.|`{}`|`Omit, \| 'className' \| 'onMouseDown' \| 'onMouseUp' \| 'onMouseLeave' \| 'onTouchStart' \| 'onTouchMove' \| 'onTouchEnd' \| 'onTouchCancel'>`|
|`onMouseDown`, `onMouseUp`, `onMouseLeave`, `onTouchStart`, `onTouchMove`, `onTouchEnd`, `onTouchCancel`|yes|Props to handle events without interfering with the Ripple Effect implementation. one function is accepted. *Rather than using this, we recommend wrapping the RippleContainer itself in another HTML element and defining a handler for that element.|`()=>{}`|`(event) => void`|