Customizable cursor component for any style. 🕹️

Website

Let's apply react-cursorify!

You can install react-cursorify in your React project using the two commands below.

via npm:

npm install @cursorify/react

or via yarn:

yarn add @cursorify/react

To apply react-cursorify, simply wrap your React project with CursorifyProvider. It's easy, right?

import { CursorifyProvider } from '@cursorify/react'

const App = () => {
  return (
    <CursorifyProvider>
      <>{/*....your component */}</>
    </CursorifyProvider>
  )
}

export default App

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.
• breakpoint: You can set breakpoint to disable in mobile size.

import { CursorifyProvider, EmojiCursor } from '@cursorify/react'

const App = () => {
  return (
    <CursorifyProvider
      cursor={EmojiCursor}
      delay={2}
      opacity={0.7}
      visibleDefaultCursor={false}
      breakpoint={997}
    >
      <>{/*....your component */}</>
    </CursorifyProvider>
  )
}

export default App

For more details, please refer to the Docs.

react-cursorify manages custom cursor components so that they can be shared and used. Please share your cursor component via PR!

Check out the Contributing Guide.

react-cursorify is an MIT-licensed open source project. It can grow thanks to the sponsors and support from the amazing backers.

none.

The MIT License.