Used to get the current cursor theme and modify it
Source code
hooks/use-cursor-theme.ts
1import { useEffect, useState } from "react";23export default function useCursorTheme() {4const [defaultTheme, setDefaultTheme] = useState("");5const [theme, setTheme] = useState(6defaultTheme,7);8const setCursorDefault = () => {9setTheme(defaultTheme);10};11useEffect(()=> {12const defaulttheme = getComputedStyle(document.documentElement).getPropertyValue("--cursor");13setDefaultTheme(defaulttheme);14setTheme(defaulttheme);15}, [defaultTheme])1617useEffect(() => {18const root = window.document.documentElement;19root.style.setProperty("--cursor", theme);20// eslint-disable-next-line react-hooks/exhaustive-deps21}, [theme]);22return { theme, setTheme, setCursorDefault, defaultTheme };23}
Usage
theme: The current color applied to the cursor
setTheme: Current color setter. Values are to be HEX colors.
setCursorDefault: Sets the cursor color back to default.
defaultTheme: The default color applied to the cursor
components/componentwithcursor.tsx
1export default function ComponentWithCursor({ cursorColor } : {cursorColor?: string}) {2const { setTheme, setCursorDefault, defaultTheme } = useCursorTheme();3return (4<div5onMouseEnter={() => {6setTheme(cursorColor || defaultTheme);7}}8onMouseLeave={setCursorDefault} />