https://github.com/morethanmin/react-cursorify
Customizable cursor component in react project đšī¸
https://github.com/morethanmin/react-cursorify
component component-library custom-cursor react-component react-cursorify
Last synced: about 1 year ago
JSON representation
Customizable cursor component in react project đšī¸
- Host: GitHub
- URL: https://github.com/morethanmin/react-cursorify
- Owner: morethanmin
- Created: 2023-03-12T15:01:55.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-04-19T14:59:56.000Z (about 3 years ago)
- Last Synced: 2025-04-01T06:33:33.046Z (over 1 year ago)
- Topics: component, component-library, custom-cursor, react-component, react-cursorify
- Language: TypeScript
- Homepage: https://morethanmin.github.io/react-cursorify
- Size: 1.78 MB
- Stars: 11
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# react-cursorify
Customizable cursor component for any style. đšī¸
[Website](https://morethanmin.github.io/react-cursorify)
# Getting Started
Let's apply react-cursorify!
## Install react-cursorify
You can install react-cursorify in your React project using the two commands below.
via npm:
```zsh
npm install react-cursorify
```
or via yarn:
```zsh
yarn add react-cursorify
```
## Apply to your react project
To apply react-cursorify, simply wrap your React project with `CursorifyProvider`. It's easy, right?
```tsx
import { CursorifyProvider } from 'react-cursorify'
const App = () => {
return (
<>{/*....your component */}>
)
}
export default App
```
## Applying default settings
If you want to set default options for the cursor, you can apply the default cursor component, opacity, and delay. Typically, changing the cursor settings on a website is not common, so it is better to apply your website settings to the default settings.
Refer to the description of each option below.
- cursor: pass the React component you want to apply.
- delay: You can pass a number between 1 and 10.
- opacity: You can pass a number between 0 and 1.
- visibleDefaultCursor: You can pass a boolean.
```tsx
import { CursorifyProvider, EmojiCursor } from 'react-cursorify'
const App = () => {
return (
<>{/*....your component */}>
)
}
export default App
```
## More info
For more details, please refer to the [Docs](https://morethanmin.github.io/react-cursorify/).
## Cursor
react-cursorify manages custom cursor components so that they can be shared and used. Please share your cursor component via PR!
## Contributing
Check out the [Contributing Guide](.github/CONTRIBUTING.md).
### Contributors
## Support
react-cursorify is an MIT-licensed open source project. It can grow thanks to the sponsors and support from the amazing backers.
### Sponsors
none.
## License
The [MIT License](LICENSE).