Custom Cursors in React

22 December, 2021

demo

One thing I've seen across many designer/design studio websites are a cool custom cursor in place of your default computer one. Recently, I added one to my website aswell.

I had to write one from scratch (using some internet resources of course!), since all the NPM libraries I found were either outdated, or didn't support SSR.

After adding the cursor to my own website, I had an idea to create an NPM package for it for a while. This weekend, I had some freetime from school and got to work!

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

Want a demo? I setup a quick demo website to help you tweak and experiment around with values!

#

🚀 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:

ParameterDescriptionDefaultcolorThe background colour of the cursor#000000showRingControls whether to show the ring around the cursortrueringSizeControls the size of the ring around the cursor50pxcursorSizeControls the size of the cursor10pxringBorderControls 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!

#

Conclusion

That's all for today. I just wanted to quickly show off this new React library I created.

What're your thoughts on custom cursors? Personally, I think they can hinder accessibility, so you should try to use them carefully. They'd be a perfect fit for your designer or agency home page though!

Anyways, that sums up today's post. Until next time. 👋