react-ripple-cursor
TypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published

Ripple

Does exactly what you'd expect from the name, ripples around your cursor.

yarn add react-ripple-cursor

alt Demo GIF

To affect your whole viewport, throw a <Ripple /> anywhere in your React component, otherwise to affect only a smaller area, you can wrap that area in <Ripple><YourComponent /></Ripple>

There are some sensible defaults, but you can also set the colour (colour of the Ripple, RGB array), size (size the Ripple extends to, pixels), and scope (a specific element to bind to).

import React from 'react'
import Ripple from 'react-ripple-cursor'

const YourComponent = () => (<div>
  <Ripple />

  // or

  <Ripple colour={[122, 222, 12]} size={80}>
    <SomeOtherComponent />
  </Ripple>
</div>)

Readme

Keywords

none

Package Sidebar

Install

npm i react-ripple-cursor

Weekly Downloads

5

Version

1.0.0

License

MIT

Unpacked Size

17.9 kB

Total Files

8

Last publish

Collaborators

  • zensavona