DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Custom Cursors in React
Harsh Singh
Harsh Singh

Posted on • Updated on

Custom Cursors in React

GIF

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 & got to work!

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

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

πŸš€ Setup

To download the library, head over to your terminal:

yarn add custom-pointer-react
Enter fullscreen mode Exit fullscreen mode

Next, import the cursor component into your file & 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
Enter fullscreen mode Exit fullscreen mode

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

Parameter Description Default
color The background colour 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 & import the MouseContext provider.

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

Your custom cursor should be good to go!

Top comments (4)

Collapse
 
pierrewahlberg profile image
Pierre Vahlberg

Cool project! I might be old school but when altering the cursor first became possible, everyone did it. But sites that were heavily focused on UX and usability, like webshops, official gov. sites and such quickly dropped it. The reflection is that while we think it gives the site more personality, it actually messes with one of the main means of navigation for a user and can be obtrusive.

But on a portfolio, game or even a branding site it might of course be relevant and fun for the user 😊

Worth reflecting on

Collapse
 
harshhhdev profile image
Harsh Singh

Yup, I agree. I think it is important to use it in the correct place.

For instance, I won’t use this on any of my web applications as it’ll become more of a hindrance to the user. However, I have used it in my portfolio as I went for a designer-y feel/vibe :p

Collapse
 
aadit017 profile image
Aadit

Deyum brdr

Collapse
 
harshhhdev profile image
Harsh Singh

πŸ’™

Make Your Github Profile Stand Out

>> Check out this classic DEV post <<