Let's try using a different cursor other than the default one!

You can easily create your own cursor component by using useCursorify. The useCursorify hook returns mouseState and hoverState. Refer to the description of each below.

• mouseState: Displays the mouse state. Currently, only 'default' and 'mouseDown' exist.
• hoverState: Displays the style applied using the useHoverRegister hook.

The following is the EmojiCursor cursor component of react-cursorify. You don't necessarily have to apply styles using style attribute. Try creating a cursor component with your own style!

import { useCursorify } from '@cursorify/react'

const EmojiCursor = () => {
  const { mouseState, style } = useCursorify()

  return (
    <div
      style={{
        width: 40,
        height: 40,
        fontSize: 30,
      }}
    >
      {(() => {
        if (disabled) return '🖐️'
        if (mouseState === 'mouseDown') return '✊'
        if (style === 'pointer') return '👆'
        return '🖐️'
      })()}
    </div>
  )
}

export default EmojiCursor

You can apply custom cursors as follows:

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

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

export default App

We provide various cursor components created by other people through the @cursorify/cursors library. You can also contribute to the repository by submitting a PR to share the cursor you made with others.

If you're curious about what cursors are available, check out cursors!