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
• API

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"

---

Website

Website

Feedback

If you have any feedback, please don't hesitate to reach out to me at 4rsh4vir4z4rf4r@gmail.com

Authors

• @arshazar

License

MIT