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.

Setup

To download the library, head over to your terminal:

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.

tsx

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

Parameters

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

Parameter	Description	Default
color	The background color of the cursor	#000000
showRing	Controls whether to show the ring around the cursor	true
ringSize	Controls the size of the ring around the cursor	50px
cursorSize	Controls the size of the cursor	10px
ringBorder	Controls the width of the ring's border	2px

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

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

pages/_app.tsx

import { MouseContextProvider } from 'custom-pointer-react'
...
ReactDOM.render(
  <MouseContextProvider>
    <App />
  </MouseContextProvider>,
  document.getElementById('root')
)
...

Your custom cursor should be good to go.

Conclusion

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 👋