React Ripple component adds ripple effect to the host element.
<h3 id="setup">Setup</h3>
Refer to PrimeReact <a target="_blank" href="https://primefaces.org/primereact/showcase/#/setup">setup documentation</a> for download and installation steps for your environment.
<h3 id="import">Import</h3>
<pre><code class="lang-js">import PrimeReact from 'primereact/api';
import { Ripple } from 'primereact/ripple';
</code></pre>
<h3 id="getting-started">Getting Started</h3>
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.
<pre><code class="lang-js">PrimeReact.ripple = true;
</code></pre>
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.
<h3 id="usage">Usage</h3>
Ripple is a component that needs to be imported and activated using PrimeReact.ripple = true
<pre><code class="lang-js">import { Ripple } from 'primereact/ripple';

&lt;div className="p-ripple"&gt;
 &lt;Ripple /&gt;
&lt;/div&gt;
</code></pre>
<h3 id="styling">Styling</h3>
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.
<pre><code class="lang-html">&lt;div className="p-ripple purple"&gt;
 &lt;Ripple /&gt;
&lt;/div&gt;
</code></pre>
<pre><code class="lang-css">.p-ripple.purple .p-ink {
 background: rgba(256,39,176,.3);
}
</code></pre>
<h3 id="theming">Theming</h3>
Ripple supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the <a target="_blank" href="https://primefaces.org/primereact/showcase/#/theming">Designer</a> tool.
<h3 id="resources">Resources</h3>
Visit the PrimeReact <a target="_blank" href="https://primefaces.org/primereact/showcase/#/ripple">Ripple</a> showcase for demos and documentation.

React Ripple component adds ripple effect to the host element.

### Setup

Refer to PrimeReact [setup documentation](https://primefaces.org/primereact/showcase/#/setup) for download and installation steps for your environment.

### Import

```js
import PrimeReact from 'primereact/api';
import { Ripple } from 'primereact/ripple';
```
 
### 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.

```js
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**

```js
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.

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

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

### Theming

Ripple supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the [Designer](https://primefaces.org/primereact/showcase/#/theming) tool.

### Resources

Visit the PrimeReact [Ripple](https://primefaces.org/primereact/showcase/#/ripple) showcase for demos and documentation.