darco-cursors is a collection of Neon Cursors that you can use in your projects, to change the cursor aparience.
Change the cursor experience in the browser, with a collection of default Neon Cursors, or set your own set of cursors.
Install the module using your preferred package manager:
npm install darco-cursors
yarn add darco-cursors
pnpm add darco-cursors
bun add darco-cursors
The types are available in @types/index.d
-
children
:React.ReactElement | React.ReactElement[]
-
type
:DefaultCursorTypesProps
-
customCursors
:CustomCursorsProps
-
style
:React.CSSProperties
-
className
:string
- blue
- yellow
- red
- purple
- pink
- orange
- green
- cyan
- general: string;
- pointer: string;
- text: string;
import Cursors from "darco-cursors";
function App() {
return (
<Cursors>
{/* your code here... */}
<h1> My app ...</h1>
<div>
<h1>darco-cursors working ...</h1>
</div>
</Cursors>
);
}
import Cursors from "darco-cursors";
import { DefaultCursorTypesProps } from "darco-cursors/@types";
function App() {
const myFavoriteCursors: CustomCursorsProps = "purple";
return <Cursors type={myFavoriteCursors}>{/* your code here... */}</Cursors>;
}
import Cursors from "darco-cursors";
import { CustomCursorsProps } from "darco-cursors/@types";
import general from "./myCursors/generalCursor.cur";
import pointer from "./myCursors/pointerCursor.cur";
import text from "./myCursors/textCursor.cur";
function App() {
const myCustomCursors: CustomCursorsProps = {
general: general,
pointer: pointer,
text: text,
};
return (
<Cursors customCursors={myFavoriteCursors}>
<div>{/* your code here... */}</div>
</Cursors>
);
}
Use the cursorsStyles ClassName, to set a specific cursor to any element.
import Cursors, { cursorsStyles } from "darco-cursors";
function App() {
return (
<Cursors>
<div className={cursorsStyles.pointer}>
<span>this span element will have a pointer cursor</span>
{/* your code here... */}
</div>
</Cursors>
);
}
- The cursor are not responsive.
- The cursor are not animated.
- The cursors must have a height and width lower than 42px, preferably.
- The cursor supported formats, and more expecifications are in the MDN Documentation