Source: https://primereact.org/ripple/

Introducing PrimeReact v11 Alpha 🥁Learn More

SearchK
10.9.7
FEATURES
API
THEMING

Ripple

Ripple component adds ripple effect to the host element.

Import#

import { Ripple } from 'primereact/ripple';

Copy

ConfigurationDoc#

To start with, Ripple needs to be enabled globally. See the Configuration API for details.

//_app.js
import { PrimeReactProvider } from 'primereact/api';

export default function MyApp({ Component }) {
    const value = {
        ripple: true,
        ...
    };

    return (
        <PrimeReactProvider value={value}>
            <App />
        </PrimeReactProvider>
    );
}

Copy

Basic#

Ripple is enabled by adding the component as a child and applying p-ripple class to the element.

Click Me

<div className="bg-primary flex select-none justify-content-center align-items-center shadow-2 border-round p-6 font-bold p-ripple">
    Click Me
    <Ripple />
</div>

Copy

Custom#

Default styling of the animation adds a shade of white. This can easily be customized using css that changes the color of p-ink element.

Green

Orange

Purple

<div className="p-ripple p-5 border-round border-radius-10 shadow-2">
    Green
    <Ripple
        pt={{
            root: { style: { background: 'rgba(75, 175, 80, 0.3)' } }
        }}
    />
</div>
<div className="p-ripple p-5 border-round border-radius-10 shadow-2">
    Orange
    <Ripple
        pt={{
            root: { style: { background: 'rgba(255, 193, 6, 0.3)' } }
        }}
    />
</div>
<div className="p-ripple p-5 border-round border-radius-10 shadow-2">
    Purple
    <Ripple
        pt={{
            root: { style: { background: 'rgba(156, 39, 176, 0.3)' } }
        }}
    />
</div>

Copy

Accessibility#

Screen Reader

Ripple element has the aria-hidden attribute as true so that it gets ignored by the screen readers.

Keyboard Support

Component does not include any interactive elements.

Import
ConfigurationDoc
Basic
Custom
Accessibility

PrimeReact 10.9.7 by PrimeTek