custom-pointer-react

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

💻 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

• create-react-library
• TypeScript
• Microbundle
• React
• styled-components
• Prettier
• ESLint

🤞 Contributing

After setting up the project, and making changes:

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