React-fidget-spinner NPM

React Fidget Spinner

Turn any react component into a fun clickable fidget spinner.

not just this goose 🪿

Quickstart

npm i react-fidget-spinner

import {FidgetSpinner} from "react-fidget-spinner"


const MyFidgetSpinner = () => {
    return (
        <FidgetSpinner>
            <MyComponent>
        </FidgetSpinner>
    )
}

Where are the full docs?

Interactive examples and full documentation can be found on Storybook.

Features

🎡 Physics-based flywheel spinner animation and interaction
✨ Spark Particles
🫧 Bubble Particles
💥 Click Animation
🦣 Scaling Animation
🏎️ Velocity Breakpoints - Change your configuration based on the velocity of the spinner.
🎨 Highly customisable animations with full defaults to get you started
🔫 Callback triggers for all key events

Context

Adding fun easter eggs into projects is often overlooked - It's often hard to justify the time investment from a business (or even personal) perspective.

But Users often love, remember and share these little interactions. There's always a bit of joy in finding something hidden.

I thought it could be a nice to spend a bit of time over the holiday season building something light and interactive that other people could use to quickly sprinkle a bit of fun around their existing comopnents. So, here it is... A silly component that turns whatever you want into a clickable spinning interactive widget.

I also took this as a nice opportunity to publish my first public npm package and learn a bit more about storybook (which I really enjoyed, especially given how the entire value of the component comes from interacting with the spinner live)

Shoutouts

react-library-template - I used this as a starting point for this project. It was a really painless way of publishing an npm package that was backed by good docs with storybook. Thank you morewings
react-confetti - A package that made fun and excitement quick and easy to add into another project and inspired this one. Really fun.