Custom cursors for React

custom-pointer-react


? Custom cursors for React

NPM
·
Demo

? Quickstart

Install the npm package

yarn add custom-pointer-react

Next, import & customise the cursor to your liking! Make sure to wrap the app in the context afterwards.

Need help customising? Play around with values on our website!

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

Next, wrap the app in the MouseContext

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

To hide the computer’s cursor, add the following CSS:

* {
  cursor: none !important;
}

? Parameters

Note: All parameters are optional

Parameter Description Default Value
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

? Development

Run the project locally

git clone https://github.com/harshhhdev/custom-pointer-react.git

Setting up the project

cd custom-pointer-react

# install deps
yarn

Starting server

yarn start

This should compile an instance of your project to the dist folder

? Tools Used

? Contributing

After setting up the project, and making changes:

git add .
git commit -m "commit message"
git push YOUR_REPO_URL YOUR_BRANCH

GitHub

View Github