React-cursorify NPM

react-cursorify

react-cursorify-social-card

Customizable cursor component for any style. 🕹️

Website

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:

npm install react-cursorify

or via yarn:

yarn add react-cursorify

Apply to your react project

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

import { CursorifyProvider } from 'react-cursorify'

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

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.

import { CursorifyProvider, EmojiCursor } from 'react-cursorify'

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

export default App