Custom Cursors in React
December 22, 2021

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:
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
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.
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 👋