useCursorTheme

Used to get the current cursor theme and modify it

Source code

hooks/use-cursor-theme.ts

1
import { useEffect, useState } from "react";
2
3
export default function useCursorTheme() {
4
const [defaultTheme, setDefaultTheme] = useState("");
5
const [theme, setTheme] = useState(
6
defaultTheme,
7
);
8
const setCursorDefault = () => {
9
setTheme(defaultTheme);
10
};
11
useEffect(()=> {
12
const defaulttheme = getComputedStyle(document.documentElement).getPropertyValue("--cursor");
13
setDefaultTheme(defaulttheme);
14
setTheme(defaulttheme);
15
}, [defaultTheme])
16
17
useEffect(() => {
18
const root = window.document.documentElement;
19
root.style.setProperty("--cursor", theme);
20
// eslint-disable-next-line react-hooks/exhaustive-deps
21
}, [theme]);
22
return { 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

1
export default function ComponentWithCursor({ cursorColor } : {cursorColor?: string}) {
2
const { setTheme, setCursorDefault, defaultTheme } = useCursorTheme();
3
return (
4
<div
5
onMouseEnter={() => {
6
setTheme(cursorColor || defaultTheme);
7
}}
8
onMouseLeave={setCursorDefault} />