/react-pointer-ripple

ripple animation to pointer events in react components

Primary LanguageJavaScript

React Pointer Ripple

An NPM Package to add ripple animation on pointer events to react components

Overview

Adds ripple animation to pointer events (mouse / touch) including:

  • Click
  • Touch / Tap
  • Drag
  • Scroll/Swipe

Works well on both desktop and mobile devices. Multi touch support comming soon..

Installation and Usage

The easiest way to use react-pointer-ripple is to install it from npm

yarn add react-pointer-ripple

Then use it as a wrapper around any component in your React app

import React from 'react';
import PointerRipple from 'react-pointer-ripple';

const App = () => {
  return (
    <PointerRipple>
      <div>Hello World!</div>     // any component/text here..
    </PointerRipple>
  )
}

Props

coming soon..