Ripple

Import via Module

import PrimeReact from 'primereact/api';
import { Ripple } from 'primereact/ripple';
 

Import via CDN

<script src="https://unpkg.com/primereact/core/core.min.js"></script>
 

Getting Started

Ripple effect is an optional animation for the supported components such as buttons. It is disabled by default and needs to be enabled at your app's main container (e.g. App.js) using the PrimeReact class.

PrimeReact.ripple = true;
 

Note: That would be it to enable ripple on PrimeReact components, next section describes how to use it with your own components and standard elements.

Usage

Ripple is a component that needs to be imported and activated using PrimeReact.ripple = true

import { Ripple } from 'primereact/ripple';

<div className="p-ripple">
    <Ripple />
</div>
 

Styling

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.

<div className="p-ripple purple">
    <Ripple />
</div>
 

.p-ripple.purple .p-ink {
    background: rgba(256,39,176,.3);
}
 

Styling

This section is under development. After the necessary tests and improvements are made, it will be shared with the users as soon as possible.

Dependencies

None.