A TypeScript first Custom Cursor for React and Next.js
To install the package, run:
npm install @muybuen/cursor- 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>
);
}[coming soon]
[coming soon]
This project is maintained by John Choura, but it open to contributions from anyone. See CONTRIBUTORS for a guide on how to contribute.
This project is licensed under the MIT License - see the LICENSE file for details.