Best React.js Touch Ripple Animation Components 2021

Best React.js Touch Ripple Animation Components

In this article we want to explore ripple animation components in react.js.

(a). React Touch Ripple

Create ripple effect from Material Design with React.js.

Install

Install via NPM:

npm install react-touch-ripple --save

Usage

Basic Usage

import Ripples from 'react-touch-ripple';

const Demo = () => (
    <Ripples>
        <button>CLICK</button>
    </Ripples>
);
ReactDOM.render(<Demos />, tree);

Custom Styles

A quick note here: <Ripples> is a box wrapping around its child component (in this case, <button>) and if you are adding styles such as box-shadow or margin, make sure you apply them directly to the wrapper component instead of the child component.

const StyledWrapperDemo = () => (
    <Ripples
        className="deep-shadow"
        style={{ margin: '10px 0', }}
    >
        <button>CLICK</button>
    </Ripples>
);

Changing Color

The background-color of the ripples are default to currentColor. If you are to change it, pass it as a prop to <Ripples>.

const ColoredDemo = () => (
    <Ripples color="#00a1e9">
        <button>CLICK</button>
    </Ripples>
);

An important note: opacity: 0.3 is already set on the ripples. So you just need to pass in the color without an alpha.

<Ripples color="rgba(0, 109, 37, 0.5)">

This is UNNESSARY and will behave out of your expectation.

Center Ripples

Provide center property on the <Ripples> will center every ripple it created. This is usually useful when you are applying ripples on a switch or checkbox component. See demos for more information.

const RippleSwitch = () => (
    <Ripples center>
        <Switch />
    </Ripples>
);

Reference

Read more here.

(b). touchMyRipple

touchMyRipple is a simple library that integrate ripple effect in your fantastic site!

Installation

Download Build

<script src="myDirectory/touchMyRipple.js"></script>

or via NPM:

npm install touchmyripple --save

Basic Usage

index.js

import tmripple from 'touchmyripple';

tmripple.init({
    color: '#bada55', // default is 'rgba(255, 255, 255, 0.4)'
    eventListener: 'touchstart' // default is 'click'
});

tmripple.attachToSelectors({
    selectors: '#foo .bar [type=button]',
    color: 'rgba(0, 0, 0, 0.4)',
    eventListener: 'mousedown'
});

Methods

init(settings[Object])

This method enables ripple effect to all the elements that have the attribute data-animation="ripple".
All the following options are optional

settings[Object]

{
    // area is an option to make data-animation more specific
    area: 'class, id',

    // color...🤔
    color: 'rgba, hex, hsla',

    // pass the scrolling element if it's not window
    offsetEl: 'class, id',

    // this option accept an event listener
    eventListener: 'event'
}

attachToSelectors(settings[Object])

This method enables ripple effect to all the elements that match the class passed in 'selectors'

settings[Object]

    {
        // selector of the element you want to attach the ripple ( is required )
        selectors: 'class, id',

        // color...🤔🤔🤔🤔🤔🤔
        color: 'rgba, hex, hsla',

        // pass the scrolling element if it's not window
        offsetEl: 'class, id',

        // this option accept an event listener
        eventListener: 'event'
    }

React Usage

button.jsx

import withRipple from 'touchmyripple/react';

class Button extends Component {
  render() {
    return (
      <button {...this.props}>
        Hello <span>World</span>
      </button>
    );
  }
}

export default withRipple(Button, {
  color: "red",
  ignoreEls: { type: "secondary" }
});

app.js

class App extends React.Component {
  render() {
    const settingObj = {
      eventName: "click",
      color: "blue"
    }

    return  <Button tmripple={settingObj} />
    // or use it with default settings: <Button  />
  }
}

settings[Object]

    {
        // default is "rgba(255,255,255,0.5)"
        color: 'rgba, hex, hsla',

        // this option accept an event listener for
        // differentiate smartphone event from desktop events
        // default is "click"
        eventListener: 'event',

        // ignore a specific element
        disabled: true

        // 🔺 this setting can be setted ONLY in the decorator function
        // you can create an object of key/value attributes to ignore
        ignoreEls: {class: "CTA_Button"}

Reference

Demo and Docs

Read more here.