Custom Cursors in React

December 22, 2021

Animated cursor moving around the screen

I've come across many design studio websites with a neat custom cursor in place of your default computer one. Might not be the most accessible thing in the world, but it looks cool. Recently, I added one to my website as well.

I wrote mines from scratch as all the NPM libraries I found were either outdated, or didn't support server-side rendering.

After adding the cursor to my own website, I'd been wanting to create an NPM package for it for a while, and I got to work this weekend creating custom-pointer-react. I couldn't find a better name which wasn't already taken.

This library supports TypeScript, along with server-side rendering (Next.js and Remix)

Want a demo? I setup a quick demo website to for you to tweak and experiment with the library.


To download the library, head over to your terminal:

yarn add custom-pointer-react

Next, import the cursor component into your file and customise it. Don't forget to wrap your app in the context afterwards.

import { Cursor } from 'custom-pointer-react'
const Cursor = () => {
  return (
    <Cursor {...passParametersToCustomise} />
export default App


All parameters are optional, and here's a list of the different parameters which you can customise:

colorThe background color of the cursor#000000
showRingControls whether to show the ring around the cursortrue
ringSizeControls the size of the ring around the cursor50px
cursorSizeControls the size of the cursor10px
ringBorderControls the width of the ring's border2px

Need help finding the right parameters? Check out the demo website.

Now, go into your app and import the MouseContext provider.

import { MouseContextProvider } from 'custom-pointer-react'
    <App />

Your custom cursor should be good to go.


I hope this helped you out, I'm interested to see what you make with the library. I'd love if you dropped a star over at harshhhdev/custom-pointer-react.

Enjoy the rest of your day. Until next time 👋