@muybuen/cursor
v1.0.7
Published
Custom cursor component for React with CSS.
Downloads
573
Readme
@muybuen/cursor
A TypeScript first Custom Cursor for React and Next.js
Installation
To install the package, run:
npm install @muybuen/cursorUsage
Using in Next.js App Router
- Create a custom provider component to enclose your application in the cursor provider. This provider should include the
BuenCursorProviderand theCursorcomponent from the package. TheCursorcomponent should be placed at the end of the provider's children.
// /AppProvider.tsx
"use client";
import { BuenCursorProvider, Cursor } from "@muybuen/cursor";
import { ReactNode } from "react";
import "@muybuen/cursor/dist/base.css";
type ProviderProps = {
children: ReactNode;
};
export function Provider({ children }: ProviderProps) {
return (
<BuenCursorProvider>
{children}
<Cursor className={"buen-cursor-mod"} />
</BuenCursorProvider>
);
}- Include that provider at the root layout of page template of your application
// /app/layout.tsx
import { Provider } from "../AppProvider";
export default function RootLayout({ children }) {
return(
<html lang="en">
<body className="font-sans">
<Provider>{children}</Provider>
</body>
</html>
);
}Customizing
[coming soon]
Type Properties
[coming soon]
Contributing
This project is maintained by John Choura, but it open to contributions from anyone. See CONTRIBUTORS for a guide on how to contribute.
License
This project is licensed under the MIT License - see the LICENSE file for details.