Writing

22/12

2 minutes 302 words

Custom Cursors in React


demo

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

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

ParameterDescriptionDefault
colorThe background colour 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.

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.

I hope this helped you out, I’m interested to see what you make with the library. Enjoy the rest of your day.