React-custom-cursors NPM

React Custom Cursors

Custom cursors for React.

Installation

You can simply install React Custom Cursors either by yarn, npm or pnpm.

yarn

yarn add react-custom-cursors

npm

npm i react-custom-cursors

pnpm

pnpm add react-custom-cursors

Table of Contents

Cursor

Since Cursor component uses react hooks under the hood, you've got to use it inside a function component.

usage: <Cursor {...props} />

import React from "react";
import { Cursor } from "react-custom-cursors";

import "react-custom-cursors/dist/index.css";

function App() {
  /* your codes
   */
  return (
    <div className="app">
      <Cursor />
    </div>
  );
}

export default App;

API

Prop	Type	Default	Description
`hasCursor`	`boolean`	true	If true, cursor will be available
`color`	`string`	"#f00"	It accepts all supported values by css
`size`	`string`	"md"	"xs", "sm", "md", "lg", xl"
`speed`	`string`	"medium"	"slow", "medium", "fast"
`shape`	`string`	"round"	"round", "triangle", "square", "pentagon", "hexagon", "heptagon", "octagon", "nonagon", "decagon", "star", "frame", "cross", "rhombus"
`animation`	`string`	"none"	"none", "spin", "beat"
`hoveringAnimation`	`string`	"none"	"none", "magnify"; won't work unless animation is set to "none".
`hasDot`	`boolean`	false	if true, dot will be available
`dotColor`	`string`	"#fff"	It accepts all supported values by css
`isHollow`	`boolean`	false	if true, the cursor would be hollow (currently for round cursor only)
`zIndex`	`number`	9999	z-index attribute
`mixBlendMode`	`boolean`	true	if true, mix-blend-mode is set to "difference"