0.0.4 โ€ข Published 2 years ago

custom-pointer-react v0.0.4

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

๐Ÿš€ 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

ParameterDescriptionDefault Value
colorThe background colour of the cursor#000000
showRingControls whether to show the ring around the cursortrue
ringSizeControls the size of the ring around the cursor50px
cursorSizeControls the size of the cursor10px
ringBorderControls the width of the ring's border2px

๐Ÿ’ป 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