Material UI Ripple

Material UI Ripple is a library with core components extracted from material-ui library.

Installation

To install the latest version of the library run the following command:

npm i material-ui-ripple

Usage

The library exports 3 core component - Ripple, TouchRipple and ButtonBase,

The simplest way is to use ButtonBase component, it contains a load of style reset, and some focus/ripple logic.

Example:

import { ButtonBase } from 'material-ui-ripple';

function MaterialButton() {
  return (
    <ButtonBase className='my-button'>
      Some Text
    </ButtonBase>
  )
}    

Full documentation of component and prop types you can see on the official page.

If you want to customize the ripple effect logic you can use the TouchRipple component, from which you can access the ripple API through the ref.

Example:

import { useRef } from 'react';
import { TouchRipple } from 'material-ui-ripple';

function MaterialButton() {
  const rippleRef = useRef(null);
  
  function handleClick() {
    // There are 3 methods by which you can
    // manage the state of the ripple effect
    rippleRef.current.pulsate();
    rippleRef.current.stop();
    rippleRef.current.start();
  }
  
  return (
    <button onClick={handleClick}>
      Some Text
      <TouchRipple />
    </button>
  )
}