Skip to content

Zensavona/react-ripple-cursor

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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>)

About

🖱 Ripples around your cursor when you click

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published