Material Design 3 ripple effect for React (demo)
npm install m3-ripplePut Ripple component inside any element, and set position: relative.
The ripple effect will automatically be applied when the element is pressed.
import { Ripple } from 'm3-ripple'
import 'm3-ripple/ripple.css'
function Demo() {
return (
<button
style={{
position: 'relative',
color: 'white',
padding: '1rem 2rem',
backgroundColor: '#6200ee'
}}
>
<Ripple />
Click Me
</button>
)
}Ripple color will inherits the color of the parent element using currentColor. You can customize the ripple color by setting the color property on the parent element.
import { Ripple } from 'm3-ripple'
import 'm3-ripple/ripple.css'
function Demo() {
return (
<button
style={{
position: 'relative',
color: 'red'
}}
>
<Ripple />
Click Me
</button>
)
}You can set global CSS variables to customize the ripple opacity for hover and pressed states.
:root {
--ripple-hover-opacity: 0.08;
--ripple-pressed-opacity: 0.12;
}Otherwise, you can set the opacity using the hoverOpacity and pressedOpacity props.
import { Ripple } from 'm3-ripple'
import 'm3-ripple/ripple.css'
function Demo() {
return (
<Ripple hoverOpacity={0.1} pressedOpacity={0.15} />
)
}Here's a type definition of the props you can use with the Ripple component:
export interface RippleProps {
/**
* Disables the ripple.
*/
disabled?: boolean
/**
* hoverOpacity: The opacity of the ripple when hovered.
*
* @default 0.08
*/
hoverOpacity?: number
/**
* pressedOpacity: The opacity of the ripple when pressed.
*
* @default 0.12
*/
pressedOpacity?: number
/**
* Additional CSS classes to apply to the ripple container.
*/
className?: string
/**
* Additional styles to apply to the ripple container.
*/
style?: React.CSSProperties
/**
* Easing function for the ripple animation.
*/
easing?: 'cubic-bezier(0.2, 0, 0, 1)'
/**
* The duration in milliseconds for the ripple to grow when pressed.
*
* @default 150
*/
duration?: number
/**
* The minimum duration in milliseconds for the ripple to be considered a
* valid press.
*
* @default 225
*/
minimumPressDuration?: number
/**
* * The duration in milliseconds for the ripple to wait before starting the
*
* @default 150
*/
touchDelay?: number
}