with-custom-cursor

A Higher-Order Component (HOC) library for React that enables you to easily add a custom cursor to any component.

!with-custom-cursor logo

Features

- Wrap any component with a custom cursor that follows mouse movement.
- Fully typed with TypeScript.
- Easy integration and customization.

Installation

``bash
npm install with-custom-cursor


or


yarn add with-custom-cursor
`

Usage

$3

`tsx
import { type RefObject } from "react"

type CursorProps = {
ref: RefObject // required to work!
}
export const Cursor = ({ ref }: CursorProps) => {
return (



)
}
`

$3

`css
.cursor {
width: 16rem;
height: 16rem;
background-color: #fff;
align-items: center;
justify-content: center;
border-radius: 50%;
position: absolute;
z-index: 9;
display: flex;
}

.cursor label {
color: #252525;
font-size: 1.8rem;
font-weight: 400;
}

`

$3

`tsx
import { WithCustomCursor } from "with-custom-cursor"
import { Cursor } from "./cursor"

const Card = () => {
return (


)
}

export const CardWithCursor = WithCustomCursor(Card, Cursor)
`

API

$3


- WrappedComponent: The component you want to enhance with a custom cursor.
- CursorComponent: The cursor component (must accept a ref prop).

Returns a new component that renders your cursor and the wrapped component.

Example

Adding Animations

Animating your custom cursor is straightforward with with-custom-cursor , as it is fully compatible with any _React-friendly_ animation or CSS library.

$3

First, remove position: absolute and pointer-events: none from your cursor's style. These will be handled by the wrapper, allowing your cursor to animate freely:

`css
.cursor {
width: 16rem;
height: 16rem;
background-color: #fff;
align-items: center;
justify-content: center;
border-radius: 50%;
z-index: 9;
display: flex;
}
`


$3

Wrap your cursor component in a