These hooks aim to simplify state management, side effects, and other common functionalities in React applications, improving both productivity and code quality.
30 |
31 | ## Features
32 |
33 | 🚀 **Lightweight and Fast**
34 |
35 | - Designed to be minimal in size, ensuring your application remains performant and fast.
36 |
37 | 🌐 **SSR-Friendly**
38 |
39 | - Built with Server-Side Rendering (SSR) compatibility, making it perfect for Next.js.
40 |
41 | 📝 **Typed with TypeScript**
42 |
43 | - Full TypeScript support, including comprehensive type definitions.
44 |
45 | 🌲 **Tree Shaking Support**
46 |
47 | - Optimized for tree shaking, ensuring only the code you use is included in your final bundle.
48 |
49 | 🌍 **Cross-Browser Compatibility**
50 |
51 | - Ensures consistent behavior across all major browsers.
52 |
53 | 🔧 **Ease of Use**
54 |
55 | - Designed with simplicity and ease of integration in mind.
56 |
57 | ## Installation
58 |
59 | ```bash
60 | npm install react-fast-hooks
61 | ```
62 |
63 | ## Documentation
64 |
65 | For more detailed documentation and live code editor visit the [website](https://jpranays.github.io/react-fast-hooks/).
66 |
67 | ## Hooks Available
68 |
69 | - [useBattery](https://jpranays.github.io/react-fast-hooks/docs/hooks/useBattery) - A hook to get the battery status of the device.
70 | - [useClickOutside](https://jpranays.github.io/react-fast-hooks/docs/hooks/useClickOutside) - A hook to detect clicks outside a specified element.
71 | - [useClipboard](https://jpranays.github.io/react-fast-hooks/docs/hooks/useClipboard) - A hook to copy text to the clipboard.
72 | - [useCookie](https://jpranays.github.io/react-fast-hooks/docs/hooks/useCookie) - A hook to manage browser cookies.
73 | - [useDebounce](https://jpranays.github.io/react-fast-hooks/docs/hooks/useDebounce) - A hook to debounce a value.
74 | - [useDebouncedCallback](https://jpranays.github.io/react-fast-hooks/docs/hooks/useDebouncedCallback) - A hook to debounce a callback.
75 | - [useDeviceOrientation](https://jpranays.github.io/react-fast-hooks/docs/hooks/useDeviceOrientation) - A hook to get the device orientation.
76 | - [useDimensions](https://jpranays.github.io/react-fast-hooks/docs/hooks/useDimensions) - A hook to get the dimensions of an element.
77 | - [useEventListener](https://jpranays.github.io/react-fast-hooks/docs/hooks/useEventListener) - A hook to add an event listener to a target.
78 | - [useFavicon](https://jpranays.github.io/react-fast-hooks/docs/hooks/useFavicon) - A hook to change the favicon of the page.
79 | - [useFetch](https://jpranays.github.io/react-fast-hooks/docs/hooks/useFetch) - A hook to fetch data.
80 | - [useFocusBlur](https://jpranays.github.io/react-fast-hooks/docs/hooks/useFocusBlur) - A hook to detect focus and blur events.
81 | - [useGeolocation](https://jpranays.github.io/react-fast-hooks/docs/hooks/useGeolocation) - A hook to get the geolocation of the device.
82 | - [useHistory](https://jpranays.github.io/react-fast-hooks/docs/hooks/useHistory) - A hook to manage the browser history.
83 | - [useHover](https://jpranays.github.io/react-fast-hooks/docs/hooks/useHover) - A hook to detect hover events.
84 | - [useIdle](https://jpranays.github.io/react-fast-hooks/docs/hooks/useIdle) - A hook to detect when the user is idle.
85 | - [useIntersectionObserver](https://jpranays.github.io/react-fast-hooks/docs/hooks/useIntersectionObserver) - A hook to observe an element's intersection with the viewport.
86 | - [useKeyCombo](https://jpranays.github.io/react-fast-hooks/docs/hooks/useKeyCombo) - A hook to detect key combinations.
87 | - [useKeyPress](https://jpranays.github.io/react-fast-hooks/docs/hooks/useKeyPress) - A hook to detect key presses.
88 | - [useLocalStorage](https://jpranays.github.io/react-fast-hooks/docs/hooks/useLocalStorage) - A hook to manage local storage.
89 | - [useLongPress](https://jpranays.github.io/react-fast-hooks/docs/hooks/useLongPress) - A hook to detect long presses.
90 | - [useMediaQuery](https://jpranays.github.io/react-fast-hooks/docs/hooks/useMediaQuery) - A hook to detect media queries.
91 | - [useMouse](https://jpranays.github.io/react-fast-hooks/docs/hooks/useMouse) - A hook to get the mouse position.
92 | - [useMutationObserver](https://jpranays.github.io/react-fast-hooks/docs/hooks/useMutationObserver) - A hook to observe mutations on an element.
93 | - [useNotification](https://jpranays.github.io/react-fast-hooks/docs/hooks/useNotification) - A hook to show notifications.
94 | - [useOnlineStatus](https://jpranays.github.io/react-fast-hooks/docs/hooks/useOnlineStatus) - A hook to detect online status.
95 | - [usePreferredLanguage](https://jpranays.github.io/react-fast-hooks/docs/hooks/usePreferredLanguage) - A hook to get the preferred language of the user.
96 | - [usePrevious](https://jpranays.github.io/react-fast-hooks/docs/hooks/usePrevious) - A hook to get the previous value of a state.
97 | - [useRandomColor](https://jpranays.github.io/react-fast-hooks/docs/hooks/useRandomColor) - A hook to generate a random color.
98 | - [useScript](https://jpranays.github.io/react-fast-hooks/docs/hooks/useScript) - A hook to load an external script.
99 | - [useScrollIntoPosition](https://jpranays.github.io/react-fast-hooks/docs/hooks/useScrollIntoPosition) - A hook to scroll an element into view.
100 | - [useScrollLock](https://jpranays.github.io/react-fast-hooks/docs/hooks/useScrollLock) - A hook to lock scrolling.
101 | - [useScrollPosition](https://jpranays.github.io/react-fast-hooks/docs/hooks/useScrollPosition) - A hook to get the scroll position.
102 | - [useSessionStorage](https://jpranays.github.io/react-fast-hooks/docs/hooks/useSessionStorage) - A hook to manage session storage.
103 | - [useSound](https://jpranays.github.io/react-fast-hooks/docs/hooks/useSound) - A hook to play sounds.
104 | - [useStopwatch](https://jpranays.github.io/react-fast-hooks/docs/hooks/useStopwatch) - A hook to create a stopwatch.
105 | - [useSystemTheme](https://jpranays.github.io/react-fast-hooks/docs/hooks/useSystemTheme) - A hook to get the system theme.
106 | - [useTitle](https://jpranays.github.io/react-fast-hooks/docs/hooks/useTitle) - A hook to set the document title.
107 | - [useTouch](https://jpranays.github.io/react-fast-hooks/docs/hooks/useTouch) - A hook to detect touch events.
108 | - [useTouchSwipe](https://jpranays.github.io/react-fast-hooks/docs/hooks/useTouchSwipe) - A hook to detect touch swipe events.
109 | - [useUpdateEffect](https://jpranays.github.io/react-fast-hooks/docs/hooks/useUpdateEffect) - A hook to run an effect only on updates.
110 | - [useVibration](https://jpranays.github.io/react-fast-hooks/docs/hooks/useVibration) - A hook to vibrate the device.
111 | - [useWindowFocus](https://jpranays.github.io/react-fast-hooks/docs/hooks/useWindowFocus) - A hook to detect window focus.
112 | - [useWindowScrollIntoPosition](https://jpranays.github.io/react-fast-hooks/docs/hooks/useWindowScrollIntoPosition) - A hook to scroll the window to a position.
113 | - [useWindowScrollPosition](https://jpranays.github.io/react-fast-hooks/docs/hooks/useWindowScrollPosition) - A hook to get the window scroll position.
114 | - [useWindowSize](https://jpranays.github.io/react-fast-hooks/docs/hooks/useWindowSize) - A hook to get the window size.
115 | - [useWindowTouchSwipe](https://jpranays.github.io/react-fast-hooks/docs/hooks/useWindowTouchSwipe) - A hook to detect window touch swipe events.
116 |
117 | ## Contributing
118 |
119 | Contribution guidelines [coming soon]().
120 |
--------------------------------------------------------------------------------
/docs/.gitignore:
--------------------------------------------------------------------------------
1 | # Dependencies
2 | /node_modules
3 |
4 | # Production
5 | /build
6 |
7 | # Generated files
8 | .docusaurus
9 | .cache-loader
10 |
11 | # Misc
12 | .DS_Store
13 | .env.local
14 | .env.development.local
15 | .env.test.local
16 | .env.production.local
17 |
18 | npm-debug.log*
19 | yarn-debug.log*
20 | yarn-error.log*
21 |
--------------------------------------------------------------------------------
/docs/README.md:
--------------------------------------------------------------------------------
1 | # Website
2 |
3 | This website is built using [Docusaurus](https://docusaurus.io/), a modern static website generator.
4 |
5 | ### Installation
6 |
7 | ```
8 | $ yarn
9 | ```
10 |
11 | ### Local Development
12 |
13 | ```
14 | $ yarn start
15 | ```
16 |
17 | This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
18 |
19 | ### Build
20 |
21 | ```
22 | $ yarn build
23 | ```
24 |
25 | This command generates static content into the `build` directory and can be served using any static contents hosting service.
26 |
27 | ### Deployment
28 |
29 | Using SSH:
30 |
31 | ```
32 | $ USE_SSH=true yarn deploy
33 | ```
34 |
35 | Not using SSH:
36 |
37 | ```
38 | $ GIT_USER= yarn deploy
39 | ```
40 |
41 | If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.
42 |
--------------------------------------------------------------------------------
/docs/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
3 | };
4 |
--------------------------------------------------------------------------------
/docs/docs/hooks/useBattery.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useBattery
3 | title: useBattery
4 | sidebar_label: useBattery
5 | ---
6 |
7 | Hook to get the current battery status of the device.
8 |
9 | ### Usage
10 |
11 | ```jsx live
12 | function App() {
13 | const batteryState = useBattery();
14 |
15 | return (
16 |
30 | );
31 | }
32 | ```
33 |
34 | ### API
35 |
36 | Returns : `BatteryState`
37 |
38 | An object containing the following properties:
39 |
40 | - `supported` : A boolean indicating if the Battery API is supported.
41 | - `loading` : A boolean indicating if the battery status is currently loading.
42 | - `level` : A number or null indicating the current battery level (0 to 1).
43 | - `charging` : A boolean or null indicating whether the battery is currently charging.
44 | - `chargingTime` : A number or null indicating the time remaining until the battery is fully charged (in seconds).
45 | - `dischargingTime` : A number or null indicating the time remaining until the battery is fully discharged (in seconds).
46 |
--------------------------------------------------------------------------------
/docs/docs/hooks/useClickOutside.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useClickOutside
3 | title: useClickOutside
4 | sidebar_label: useClickOutside
5 | ---
6 |
7 | Hook to detect clicks outside of a specified element.
8 |
9 | ### Usage
10 |
11 | ```jsx live
12 | function App() {
13 | const [isOpen, setIsOpen] = useState(true);
14 | const ref = useRef(null);
15 |
16 | useClickOutside(ref, () => {
17 | console.log("Clicked outside the element");
18 | });
19 |
20 | return (
21 |
22 |
23 |
Click outside this element and check the console.
24 |
25 |
26 | );
27 | }
28 | ```
29 |
30 | ### API
31 |
32 | Parameter
33 |
34 | - `ref` : `elementRef` - The ref to the element to track clicks outside of.
35 | - `callback` : `(e:MouseEvent) => void` - The callback function to execute when a click is detected outside the element.
36 |
--------------------------------------------------------------------------------
/docs/docs/hooks/useClipboard.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useClipboard
3 | title: useClipboard
4 | sidebar_label: useClipboard
5 | ---
6 |
7 | Hook to copy text to the clipboard.
8 |
9 | ### Usage
10 |
11 | ```jsx live
12 | function App() {
13 | const { copy, isCopied } = useClipboard();
14 |
15 | return (
16 |
17 |
20 |
21 | );
22 | }
23 | ```
24 |
25 | ### API
26 |
27 | Returns : `Object`
28 |
29 | An object containing the following properties:
30 |
31 | - `copy` : A function to copy the provided text to the clipboard.
32 | - `isCopied` : A boolean state that is set to true when the text is successfully copied and resets to false after 2 seconds.
33 |
--------------------------------------------------------------------------------
/docs/docs/hooks/useCookie.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useCookie
3 | title: useCookie
4 | sidebar_label: useCookie
5 | ---
6 |
7 | Hook to manage browser cookies.
8 |
9 | ### Usage
10 |
11 | ```jsx live
12 | function App() {
13 | const { value, setCookie, removeCookie, hasCookie } = useCookie("myCookie");
14 |
15 | return (
16 |
17 |
Cookie Value: {value}
18 |
21 |
22 |
Has Cookie: {hasCookie() ? "Yes" : "No"}
23 |
24 | );
25 | }
26 | ```
27 |
28 | ### API
29 |
30 | Parameters:
31 |
32 | - `key` : `string` - The key of the cookie to manage.
33 |
34 | Returns: An object containing the following properties:
35 |
36 | - `value`: `string | undefined` - The value of the cookie.
37 | - `setCookie`: `(value: string, options?: CookieOptions) => void` - A function to set a cookie.
38 | - `removeCookie`: `() => void` - A function to remove the cookie.
39 | - `hasCookie`: `() => boolean` - A function to check if the cookie exists.
40 |
41 | CookieOptions:
42 |
43 | - `expires` : `number | Date` - The expiration time of the cookie. It can be in seconds or a Date object.
44 | - `path` : `string` - The path for which the cookie is valid.
45 | - `domain` : `string` - The domain for which the cookie is valid.
46 | - `secure` : `boolean` - Whether the cookie should be secure.
47 | - `sameSite` : `"Lax" | "Strict" | "None"` - The SameSite attribute of the cookie.
48 |
--------------------------------------------------------------------------------
/docs/docs/hooks/useDebounce.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useDebounce
3 | title: useDebounce
4 | sidebar_label: useDebounce
5 | ---
6 |
7 | Hook to debounce a value.
8 |
9 | ### Usage
10 |
11 | ```jsx live
12 | function App() {
13 | const [text, setText] = useState("");
14 | const debouncedText = useDebounce(text, 500);
15 |
16 | return (
17 |
26 | );
27 | }
28 | ```
29 |
30 | ### API
31 |
32 | Parameters
33 |
34 | - `value` : `any` - The value to debounce.
35 | - `delay` : `number` - The time in milliseconds to delay the value update.
36 |
37 | Returns
38 |
39 | A debounced value that is updated after the specified delay.
40 |
--------------------------------------------------------------------------------
/docs/docs/hooks/useDebouncedCallback.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useDebouncedCallback
3 | title: useDebouncedCallback
4 | sidebar_label: useDebouncedCallback
5 | ---
6 |
7 | Hook to create a debounced version of a callback function.
8 |
9 | ### Usage
10 |
11 | ```jsx live
12 | function App() {
13 | const [value, setValue] = useState("");
14 |
15 | const debouncedCallback = useDebouncedCallback((newValue) => {
16 | console.log("Debounced value:", newValue);
17 | }, 300);
18 |
19 | const handleChange = (event: React.ChangeEvent) => {
20 | setValue(event.target.value);
21 | debouncedCallback(event.target.value);
22 | };
23 |
24 | return (
25 |
26 |
27 |
28 | );
29 | }
30 | ```
31 |
32 | ### API
33 |
34 | Parameters
35 |
36 | - `callback` : `Function` - The callback function to debounce.
37 | - `delay` : `number` - The time in milliseconds to delay the callback execution.
38 |
39 | Returns
40 |
41 | A debounced version of the callback function that is executed after the specified delay.
42 |
--------------------------------------------------------------------------------
/docs/docs/hooks/useDeviceOrientation.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useDeviceOrientation
3 | title: useDeviceOrientation
4 | sidebar_label: useDeviceOrientation
5 | ---
6 |
7 | Hook to get the current orientation of the device.
8 |
9 | ### Usage
10 |
11 | ```jsx live
12 | function App() {
13 | const orientation = useDeviceOrientation();
14 |
15 | return (
16 |
17 |
Device Orientation: {orientation}
18 |
19 | );
20 | }
21 | ```
22 |
23 | ### API
24 |
25 | Returns: `string`
26 |
27 | A string indicating whether the device is in portrait or landscape mode.
28 |
29 | Possible return values: "portrait" or "landscape".
30 |
--------------------------------------------------------------------------------
/docs/docs/hooks/useDimensions.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useDimensions
3 | title: useDimensions
4 | sidebar_label: useDimensions
5 | ---
6 |
7 | Hook to get the dimensions (width and height) of a specified element.
8 |
9 | ### Usage
10 |
11 | ```jsx live
12 | function App() {
13 | const elementRef = useRef(null);
14 | const dimensions = useDimensions(elementRef, 200);
15 |
16 | return (
17 |
18 |
Element Dimensions
19 |
Width: {dimensions.width}
20 |
Height: {dimensions.height}
21 |
22 | );
23 | }
24 | ```
25 |
26 | ### API
27 |
28 | Parameters
29 |
30 | - `ref` : `elementRef` - The ref to the element to track dimensions.
31 | - `throttleTime` : `number` - The time in milliseconds to throttle the resize event handler. Defaults to 200ms.
32 |
33 | Returns : An object with the following properties:
34 |
35 | - `width` : number - The width of the element.
36 | - `height` : number - The height of the element.
37 |
--------------------------------------------------------------------------------
/docs/docs/hooks/useEventListener.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useEventListener
3 | title: useEventListener
4 | sidebar_label: useEventListener
5 | ---
6 |
7 | Hook to attach an event listener to a DOM element and clean it up on unmount.
8 |
9 | ### Usage
10 |
11 | ```jsx live
12 | function App() {
13 | const elementRef = useRef(null);
14 |
15 | useEventListener(
16 | "click",
17 | (event) => {
18 | alert("Element clicked!", event);
19 | },
20 | elementRef
21 | );
22 |
23 | return
Click me!
;
24 | }
25 | ```
26 |
27 | ### API
28 |
29 | Parameters
30 |
31 | - `eventName` : `string` - The name of the event to listen for.
32 | - `handler` : `function` - The event handler function.
33 | - `ref` : `elementRef` - The ref to the element to attach the event listener.
34 | - `options` : `boolean | AddEventListenerOptions` - An options object that specifies characteristics about the event listener. Defaults to `{}`.
35 |
--------------------------------------------------------------------------------
/docs/docs/hooks/useFavicon.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useFavicon
3 | title: useFavicon
4 | sidebar_label: useFavicon
5 | ---
6 |
7 | Hook to set and update the favicon of the webpage.
8 |
9 | ### Usage
10 |
11 | ```jsx live
12 | function App() {
13 | const changeFavicon = useFavicon("");
14 |
15 | const handleFaviconChange = () => {
16 | changeFavicon("https://github.githubassets.com/favicons/favicon.svg");
17 | };
18 |
19 | return (
20 |
21 |
Hello, world!
22 |
23 |
24 | );
25 | }
26 | ```
27 |
28 | ### API
29 |
30 | Parameter:
31 |
32 | `initialFaviconUrl`: string - The initial URL of the favicon to set.
33 |
34 | Returns : `function`
35 |
36 | A function to change the favicon of the webpage.
37 |
--------------------------------------------------------------------------------
/docs/docs/hooks/useFetch.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useFetch
3 | title: useFetch
4 | sidebar_label: useFetch
5 | ---
6 |
7 | Fetch data from an API endpoint with the `useFetch` hook.
8 |
9 | ### Usage
10 |
11 | ```jsx live
12 | function App() {
13 | const { data, loading, error, refetch } = useFetch(
14 | "https://jsonplaceholder.typicode.com/posts"
15 | );
16 |
17 | if (loading) return
Loading...
;
18 | if (error) return
Error: {error.message}
;
19 |
20 | return (
21 |
22 |
23 |
24 | {data?.map((post) => (
25 |
{post.title}
26 | ))}
27 |
28 |
29 | );
30 | }
31 | ```
32 |
33 | ### API
34 |
35 | Parameters
36 |
37 | - `url` : `string` - The URL of the API endpoint to fetch data from.
38 | - `options` : `RequestInit` - An object containing any custom settings that you want to apply to the request. Defaults to `{}`.
39 |
40 | - `method` : `string` - The HTTP method to use for the request. Defaults to `GET`.
41 | - `headers` : `HeadersInit` - Any headers you want to include in the request.
42 | - `body` : `BodyInit` - The body of the request.
43 |
44 | Returns : An object with the following properties:
45 |
46 | - `data` : `any` - The data fetched from the API endpoint.
47 | - `loading` : `boolean` - A boolean indicating whether the request is in progress.
48 | - `error` : `Error | null` - An error object if the request fails, `null` otherwise.
49 | - `refetch` : `() => void` - A function to refetch the data from the API endpoint.
50 |
--------------------------------------------------------------------------------
/docs/docs/hooks/useFocusBlur.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useFocusBlur
3 | title: useFocusBlur
4 | sidebar_label: useFocusBlur
5 | ---
6 |
7 | Hook to get focus and blur functions for an element.
8 |
9 | ### Usage
10 |
11 | ```jsx live
12 | function App() {
13 | const inputRef = useRef(null);
14 | const { focus, blur } = useFocusBlur(inputRef);
15 |
16 | return (
17 |
18 |
19 |
20 |
21 |
22 | );
23 | }
24 | ```
25 |
26 | ### API
27 |
28 | Parameter
29 |
30 | - `elementRef` : A React ref object pointing to the element whose focus and blur functions need to be tracked.
31 |
32 | Returns : An object with the following properties:
33 |
34 | - `focus` : A function to focus the element.
35 | - `blur` : A function to blur the element.
36 |
--------------------------------------------------------------------------------
/docs/docs/hooks/useGeolocation.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useGeolocation
3 | title: useGeolocation
4 | sidebar_label: useGeolocation
5 | ---
6 |
7 | Hook to get the current geolocation.
8 |
9 | ### Usage
10 |
11 | ```jsx live
12 | function App() {
13 | const geolocation = useGeolocation();
14 |
15 | return (
16 |
26 | );
27 | }
28 | ```
29 |
30 | ### API
31 |
32 | Parameter
33 |
34 | ref : `elementRef` - The ref to the element to track hover state.
35 |
36 | Returns : `boolean`
37 |
38 | An boolean indicating if the element is hovered or not.
39 |
--------------------------------------------------------------------------------
/docs/docs/hooks/useIdle.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useIdle
3 | title: useIdle
4 | sidebar_label: useIdle
5 | ---
6 |
7 | Hook to detect user inactivity.
8 |
9 | ### Usage
10 |
11 | ```jsx live
12 | function App() {
13 | const isIdle = useIdle({ timeout: 5000 });
14 |
15 | return (
16 |
17 |
User Idle Hook
18 |
{isIdle ? "User is idle" : "User is active"}
19 |
20 | );
21 | }
22 | ```
23 |
24 | ### API
25 |
26 | Parameter:
27 |
28 | - `options` : `UseIdleOptions` - An object specifying the timeout in milliseconds.
29 |
30 | - `UseIdleOptions` includes the following properties:
31 |
32 | - `timeout` : `number` - The time in milliseconds to consider the user as idle.
33 |
34 | Returns : A boolean value indicating whether the user is idle or not, updated in real-time. Useful for tracking user inactivity.
35 |
--------------------------------------------------------------------------------
/docs/docs/hooks/useIntersectionObserver.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useIntersectionObserver
3 | title: useIntersectionObserver
4 | sidebar_label: useIntersectionObserver
5 | ---
6 |
7 | Hook to observe the visibility of an element using the Intersection Observer API.
8 |
9 | ### Usage
10 |
11 | ```jsx live
12 | function App() {
13 | const elementRef = useRef(null);
14 |
15 | const entry = useIntersectionObserver(elementRef, {
16 | threshold: 1,
17 | });
18 |
19 | return (
20 |
21 |
28 | {entry?.isIntersecting ? "In view" : "Out of view"}
29 |
30 |
31 | );
32 | }
33 | ```
34 |
35 | ### API
36 |
37 | Parameters
38 |
39 | - `options` : `IntersectionObserverOptions` - The Intersection Observer options. These include:
40 | - `root` : `Element` - The element that is used as the viewport for checking visibility of the target.
41 | - `rootMargin` : `string` - Margin around the root.
42 | - `threshold` : `number | number[]` - A single number or an array of numbers which indicate at what percentage of the target's visibility the observer's callback should be executed.
43 |
44 | Returns
45 |
46 | - `observer` : `(node: Element | null) => void` - A callback ref to set the target element to be observed.
47 | - `entry` : `IntersectionObserverEntry | null` - The IntersectionObserverEntry providing information about the intersection of the target with the root.
48 |
--------------------------------------------------------------------------------
/docs/docs/hooks/useKeyCombo.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useKeyCombo
3 | title: useKeyCombo
4 | sidebar_label: useKeyCombo
5 | ---
6 |
7 | Hook to detect if a specified key combination is pressed.
8 |
9 | ### Usage
10 |
11 | ```jsx live
12 | function App() {
13 | const isCtrlShiftPressed = useKeyCombo(["Control", "Shift"]);
14 |
15 | return (
16 |
17 |
Press the Ctrl + Shift keys
18 | {isCtrlShiftPressed &&
Ctrl + Shift keys are pressed!
}
19 |
20 | );
21 | }
22 | ```
23 |
24 | ### API
25 |
26 | Parameter
27 |
28 | - `keys` : `string[]` - An array of keys to detect.
29 |
30 | Returns : `boolean`
31 |
32 | A boolean indicating if the specified key combination is pressed or not.
33 |
--------------------------------------------------------------------------------
/docs/docs/hooks/useKeyPress.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useKeyPress
3 | title: useKeyPress
4 | sidebar_label: useKeyPress
5 | ---
6 |
7 | Hook to detect if a specified key is pressed.
8 |
9 | ### Usage
10 |
11 | ```jsx live
12 | function App() {
13 | const isEnterPressed = useKeyPress("Enter");
14 |
15 | return (
16 |
17 |
Press the Enter key
18 | {isEnterPressed &&
Enter key is pressed!
}
19 |
20 | );
21 | }
22 | ```
23 |
24 | ### API
25 |
26 | Parameter
27 |
28 | - `key` : `string` - The key to detect.
29 |
30 | Returns : `boolean`
31 |
32 | A boolean indicating if the specified key is pressed or not.
33 |
--------------------------------------------------------------------------------
/docs/docs/hooks/useLocalStorage.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useLocalStorage
3 | title: useLocalStorage
4 | sidebar_label: useLocalStorage
5 | ---
6 |
7 | Hook to manage a value that syncs with localStorage.
8 |
9 | ### Usage
10 |
11 | ```jsx live
12 | function App() {
13 | const [name, setName] = useLocalStorage("name", "John Doe");
14 |
15 | return (
16 |
17 |
Name: {name}
18 | setName(e.target.value)}
22 | />
23 |
24 | );
25 | }
26 | ```
27 |
28 | ### API
29 |
30 | Parameter
31 |
32 | - `key` : string - The key to store the value in localStorage.
33 | - `initialValue` : T - The initial value to store in localStorage.
34 |
35 | Returns : An array with the following elements:
36 |
37 | - `value` : T - The value stored in localStorage.
38 | - `setValue` : (value: T) => void - A function to set the value in localStorage.
39 |
--------------------------------------------------------------------------------
/docs/docs/hooks/useLongPress.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useLongPress
3 | title: useLongPress
4 | sidebar_label: useLongPress
5 | ---
6 |
7 | Enable precise control of long-press interactions for both touch and mouse events with `useLongPress`.
8 |
9 | ### Usage
10 |
11 | ```jsx live
12 | function App() {
13 | const buttonRef = useRef(null);
14 |
15 | const onLongPress = () => {
16 | console.log("Long press triggered!");
17 | alert("Long press triggered!");
18 | };
19 |
20 | const onPress = () => {
21 | console.log("Press started!");
22 | };
23 |
24 | const onRelease = () => {
25 | console.log("Press released!");
26 | };
27 |
28 | useLongPress(buttonRef, {
29 | threshold: 1500,
30 | onLongPress,
31 | onPress,
32 | onRelease,
33 | });
34 |
35 | return ;
36 | }
37 | ```
38 |
39 | ### API
40 |
41 | Parameters
42 |
43 | - `ref` : `elementRef` - The ref to the element to track long press interactions.
44 | - `options` : `LongPressOptions` - An object with the following properties:
45 | - `threshold` : `number` - The time in milliseconds to trigger the long press event. Defaults to 500ms.
46 | - `onLongPress` : `() => void` - The function to call when the long press event is triggered.
47 | - `onPress` : `() => void` - The function to call when the press event starts.
48 | - `onRelease` : `() => void` - The function to call when the press event is released.
49 |
--------------------------------------------------------------------------------
/docs/docs/hooks/useMediaQuery.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useMediaQuery
3 | title: useMediaQuery
4 | sidebar_label: useMediaQuery
5 | ---
6 |
7 | Hook to detect media query matches.
8 |
9 | ### Usage
10 |
11 | ```jsx live
12 | function App() {
13 | const isMobile = useMediaQuery("(max-width: 600px)");
14 |
15 | const isDesktop = useMediaQuery("(min-width: 1024px)");
16 |
17 | return (
18 | <>
19 |
20 |
Mobile View : {isMobile ? "true" : "false"}
21 |
22 |
23 |
Desktop View : {isDesktop ? "true" : "false"}
24 |
25 |
26 | );
27 | }
28 | ```
29 |
30 | ### API
31 |
32 | Parameter
33 |
34 | - `query` : A string representing the media query to match.
35 |
36 | Returns : `boolean`
37 |
38 | A boolean indicating if the media query matches or not.
39 |
--------------------------------------------------------------------------------
/docs/docs/hooks/useMouse.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useMouse
3 | title: useMouse
4 | sidebar_label: useMouse
5 | ---
6 |
7 | Hook to track the mouse position relative to a specified element.
8 |
9 | ### Usage
10 |
11 | ```jsx live
12 | function App() {
13 | const elementRef = useRef(null);
14 | const { x, y, elementX, elementY, pageX, pageY } = useMouse(elementRef);
15 |
16 | return (
17 |
21 |
Mouse Position
22 |
23 | Relative to Element - X: {x}, Y: {y}
24 |
25 |
26 | Element X: {elementX}, Element Y: {elementY}
27 |
28 |
29 | Page X: {pageX}, Page Y: {pageY}
30 |
31 |
32 | );
33 | }
34 | ```
35 |
36 | ### API
37 |
38 | Parameters
39 |
40 | - `ref` : `elementRef` - The ref to the element to track mouse position.
41 |
42 | Returns : An object with the following properties:
43 |
44 | - `x` : number - The x position of the mouse relative to the element.
45 | - `y` : number - The y position of the mouse relative to the element.
46 | - `elementX` : number - The x position of the mouse relative to the viewport.
47 | - `elementY` : number - The y position of the mouse relative to the viewport.
48 | - `pageX` : number - The x position of the mouse relative to the page.
49 | - `pageY` : number - The y position of the mouse relative to the page.
50 |
--------------------------------------------------------------------------------
/docs/docs/hooks/useMutationObserver.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useMutationObserver
3 | title: useMutationObserver
4 | sidebar_label: useMutationObserver
5 | ---
6 |
7 | Hook to observe changes to a DOM element using MutationObserver.
8 |
9 | ### Usage
10 |
11 | ```jsx live
12 | function App() {
13 | const elementRef = useRef(null);
14 |
15 | useMutationObserver(
16 | elementRef,
17 | (mutations) => {
18 | mutations.forEach((mutation) => {
19 | console.log(mutation);
20 | });
21 | },
22 | {
23 | childList: true,
24 | attributes: true,
25 | }
26 | );
27 |
28 | return (
29 |
30 | // Try changing the style of this element from the dev tools
31 |
Observe changes to this element
32 |
33 | );
34 | }
35 | ```
36 |
37 | ### API
38 |
39 | Parameters:
40 |
41 | - `ref` - The React ref to the element to observe.
42 | - `callback` - A function to handle mutations.
43 | - `options` : `UseMutationObserverOptions` - An object specifying which DOM mutations to observe.
44 |
45 | `UseMutationObserverOptions` includes the following properties:
46 |
47 | - `childList` : `boolean` - Set to `true` to observe changes to the children of the target element.
48 | - `attributes` : `boolean` - Set to `true` to observe changes to the attributes of the target element.
49 | - `characterData` : `boolean` - Set to `true` to observe changes to the data of the target element.
50 | - `subtree` : `boolean` - Set to `true` to observe changes to the descendants of the target element.
51 | - `attributeOldValue` : `boolean` - Set to `true` to record the previous value of attribute mutations.
52 | - `characterDataOldValue` : `boolean` - Set to `true` to record the previous value of character data mutations.
53 | - `attributeFilter` : `string[]` - An array of attribute names to observe. If omitted, all attributes will be observed.
54 | - `characterDataOldValue` : `boolean` - Set to `true` to record the previous value of character data before it was changed.
55 |
--------------------------------------------------------------------------------
/docs/docs/hooks/useNotification.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useNotification
3 | title: useNotification
4 | sidebar_label: useNotification
5 | ---
6 |
7 | Hook to trigger browser notifications.
8 |
9 | ### Usage
10 |
11 | ```jsx live
12 | function App() {
13 | const {
14 | permission,
15 | showNotification,
16 | requestPermission,
17 | updateNotification,
18 | } = useNotification("Hello!", {
19 | body: "This is a notification body",
20 | icon: "/path/to/icon.png",
21 | });
22 |
23 | useEffect(() => {
24 | if (permission === "granted") {
25 | showNotification();
26 | } else if (permission === "default") {
27 | requestPermission();
28 | }
29 | }, [permission, showNotification, requestPermission]);
30 |
31 | const handleUpdateNotification = () => {
32 | updateNotification("Updated Title!", {
33 | body: "This is an updated notification body",
34 | icon: "/path/to/updated-icon.png",
35 | });
36 | };
37 |
38 | return (
39 |
40 |
41 |
42 |
43 | );
44 | }
45 | ```
46 |
47 | ### API
48 |
49 | Parameters
50 |
51 | - `title` : `string` - The title of the notification.
52 | - `options` : `NotificationOptions` - Optional configuration for the notification. These include:
53 | - `body` : `string` - The body text of the notification.
54 | - `icon` : `string` - The URL of an icon to be displayed with the notification.
55 | - `dir` : `NotificationDirection` - The direction of the notification; it can be auto, ltr, or rtl.
56 | - `lang` : `string` - The language of the notification.
57 | - `tag` : `string` - An identifying tag for the notification.
58 | - `renotify` : `boolean` - Whether to re-notify if a notification with the same tag is already displayed.
59 | - `silent` : `boolean` - Whether the notification should be silent.
60 | - `requireInteraction` : `boolean` - Whether the notification should remain active until the user clicks or dismisses it.
61 | - `badge` : `string` - URL of an image to represent the notification when there is not enough space to display the icon.
62 | - `vibrate` : `number | number[]` - A vibration pattern for the device.
63 | - `timestamp` : `number` - The time the notification was created.
64 | - `image` : `string` - URL of an image to be displayed with the notification.
65 |
66 | Returns
67 |
68 | - `permission` : `NotificationPermission` - The current permission status for notifications.
69 | - `showNotification` : `() => void` - A function to trigger the notification.
70 | - `requestPermission` : `() => void` - A function to request notification permission from the user.
71 | - `updateNotification` : `(newTitle: string, newOptions: NotificationOptions) => void` - A function to update the notification with new title and options.
72 |
--------------------------------------------------------------------------------
/docs/docs/hooks/useOnlineStatus.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useOnlineStatus
3 | title: useOnlineStatus
4 | sidebar_label: useOnlineStatus
5 | ---
6 |
7 | Hook to get the online status of the browser.
8 |
9 | ### Usage
10 |
11 | ```jsx live
12 | function App() {
13 | const isOnline = useOnlineStatus();
14 |
15 | return (
16 |
17 |
{isOnline ? "You are online" : "You are offline"}
18 |
19 | );
20 | }
21 | ```
22 |
23 | ### API
24 |
25 | Returns : `boolean`
26 |
27 | A boolean indicating whether the browser is online or offline.
28 |
--------------------------------------------------------------------------------
/docs/docs/hooks/usePreferredLanguage.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: usePreferredLanguage
3 | title: usePreferredLanguage
4 | sidebar_label: usePreferredLanguage
5 | ---
6 |
7 | Hook to get the user's preferred language from the browser.
8 |
9 | ### Usage
10 |
11 | ```jsx live
12 | function App() {
13 | const { language, languages, isSupported } = usePreferredLanguage();
14 |
15 | return (
16 |
17 | {isSupported ? (
18 |
Your preferred language is: {language}
19 | ) : (
20 |
Preferred language detection is not supported on this device.
21 | )}
22 |
23 | );
24 | }
25 | ```
26 |
27 | ### API
28 |
29 | Returns : An object with the following properties:
30 |
31 | - `language` : `string` - The user's preferred language.
32 | - `languages` : `string[]` - An array of the user's preferred languages.
33 | - `isSupported` : `boolean` - A boolean indicating whether preferred language detection is supported on the device.
34 |
--------------------------------------------------------------------------------
/docs/docs/hooks/usePrevious.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: usePrevious
3 | title: usePrevious
4 | sidebar_label: usePrevious
5 | ---
6 |
7 | Hook to get the previous value of a state or prop.
8 |
9 | ### Usage
10 |
11 | ```jsx live
12 | function App() {
13 | const [count, setCount] = useState(0);
14 | const prevCount = usePrevious(count);
15 |
16 | useEffect(() => {
17 | console.log(`Current count: ${count}, Previous count: ${prevCount}`);
18 | }, [prevCount, count]);
19 |
20 | return (
21 |
22 |
Current count: {count}
23 |
Previous count: {prevCount}
24 |
25 |
26 | );
27 | }
28 | ```
29 |
30 | ### API
31 |
32 | Parameter:
33 |
34 | - `value` : `any` - The value to track.
35 |
36 | Returns:
37 |
38 | The previous value of the specified value, updated in real-time. Useful for tracking state or prop changes.
39 |
--------------------------------------------------------------------------------
/docs/docs/hooks/useRandomColor.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useRandomColor
3 | title: useRandomColor
4 | sidebar_label: useRandomColor
5 | ---
6 |
7 | Hook to generate a random color.
8 |
9 | ### Usage
10 |
11 | ```jsx live
12 | function App() {
13 | const { color, generateNewColor } = useRandomColor();
14 |
15 | return (
16 |
17 |
Random Color Background
18 |
19 |
20 | );
21 | }
22 | ```
23 |
24 | ### API
25 |
26 | Returns:
27 |
28 | An object containing the following properties:
29 |
30 | - `color`: A string representing the current random color.
31 | - `generateNewColor`: A function that generates a new random color and updates the `color` property.
32 |
--------------------------------------------------------------------------------
/docs/docs/hooks/useScript.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useScript
3 | title: useScript
4 | sidebar_label: useScript
5 | ---
6 |
7 | Hook to dynamically load an external script.
8 |
9 | ### Usage
10 |
11 | ```jsx live
12 | function App() {
13 | const { loading, error } = useScript(
14 | "https://example.com/external-script.js",
15 | {
16 | removeOnUnmount: true,
17 | async: true,
18 | defer: true,
19 | }
20 | );
21 |
22 | if (loading) return
Loading script...
;
23 | if (error) return
Error loading script: {error.message}
;
24 |
25 | return (
26 |
27 |
Script Loaded Successfully
28 | {/* Your component code */}
29 |
30 | );
31 | }
32 | ```
33 |
34 | ### API
35 |
36 | Parameter
37 |
38 | - `url` : string - The URL of the script to load.
39 | - `options` : object - An object with the following properties:
40 | - `removeOnUnmount` : boolean - Whether to remove the script when the component unmounts. Defaults to `false`.
41 | - `async` : boolean - Whether to load the script asynchronously. Defaults to `true`.
42 | - `defer` : boolean - Whether to load the script with the `defer` attribute. Defaults to `false`.
43 |
44 | Returns : An object with the following properties:
45 |
46 | - `loading` : boolean - A boolean value indicating whether the script is still loading.
47 | - `error` : Error | null - An error object if the script loading failed, otherwise `null`.
48 |
--------------------------------------------------------------------------------
/docs/docs/hooks/useScrollIntoPosition.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useScrollIntoPosition
3 | title: useScrollIntoPosition
4 | sidebar_label: useScrollIntoPosition
5 | ---
6 |
7 | Hook to scroll an element to a specific position.
8 |
9 | ### Usage
10 |
11 | ```jsx live
12 | function App() {
13 | const elementRef = useRef(null);
14 | const scrollToPosition = useScrollIntoPosition(elementRef);
15 |
16 | const handleScroll = () => {
17 | scrollToPosition({ x: 100, y: 200, behavior: "smooth" });
18 | };
19 |
20 | return (
21 |
22 |
26 | {/* Content here */}
27 |
28 |
29 |
30 |
31 | );
32 | }
33 | ```
34 |
35 | ### API
36 |
37 | Parameter
38 |
39 | `elementRef` : A ref to the element that you want to scroll.
40 |
41 | Returns : `ScrollToPosition`
42 |
43 | A function to scroll the element to the specified x and y coordinates.
44 |
45 | Function parameters
46 |
47 | `x` : A number indicating the x-coordinate to scroll to.
48 |
49 | `y` : A number indicating the y-coordinate to scroll to.
50 |
51 | `behavior` : A string indicating the scroll behavior ('auto' or 'smooth'). Defaults to 'auto'.
52 |
--------------------------------------------------------------------------------
/docs/docs/hooks/useScrollLock.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useScrollLock
3 | title: useScrollLock
4 | sidebar_label: useScrollLock
5 | ---
6 |
7 | Hook to lock and unlock scrolling on the body element with an extra layer of security using MutationObserver.
8 |
9 | ### Usage
10 |
11 | ```jsx live
12 | function App() {
13 | const { lockScroll, unlockScroll, isLocked } = useScrollLock();
14 |
15 | return (
16 |
17 |
18 |
19 |
{`Scroll is ${isLocked ? "locked" : "unlocked"}`}
20 |
21 | );
22 | }
23 | ```
24 |
25 | ### API
26 |
27 | Returns
28 |
29 | - `lockScroll` : `() => void` - Locks scrolling on the body element.
30 | - `unlockScroll` : `() => void` - Unlocks scrolling on the body element.
31 | - `isLocked` : `boolean` - A boolean indicating if the scroll is locked or not.
32 |
--------------------------------------------------------------------------------
/docs/docs/hooks/useScrollPosition.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useScrollPosition
3 | title: useScrollPosition
4 | sidebar_label: useScrollPosition
5 | ---
6 |
7 | Hook to get the current scroll position of a specified element.
8 |
9 | ### Usage
10 |
11 | ```jsx live
12 | function App() {
13 | const elementRef = useRef(null);
14 | const scrollPosition = useScrollPosition(elementRef, 200); // Throttle time is 200ms
15 |
16 | return (
17 |
29 | );
30 | }
31 | ```
32 |
33 | ### API
34 |
35 | Parameter
36 | `elementRef` : A React ref object pointing to the element whose scroll position needs to be tracked.
37 |
38 | - `throttleTime` : A number indicating the time in milliseconds to throttle the window resize event. Defaults to 200.
39 |
40 | Returns : `ScrollPosition`
41 |
42 | - `x` : A number or null indicating the current horizontal scroll position of the window.
43 | - `y` : A number or null indicating the current vertical scroll position of the window.
44 |
--------------------------------------------------------------------------------
/docs/docs/hooks/useSessionStorage.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useSessionStorage
3 | title: useSessionStorage
4 | sidebar_label: useSessionStorage
5 | ---
6 |
7 | Hook to manage a value that syncs with sessionStorage.
8 |
9 | ### Usage
10 |
11 | ```jsx live
12 | function App() {
13 | const [name, setName] = useSessionStorage < string > ("name", "John Doe");
14 |
15 | return (
16 |
17 |
Name: {name}
18 | setName(e.target.value)}
22 | />
23 |
24 | );
25 | }
26 | ```
27 |
28 | ### API
29 |
30 | Parameter
31 |
32 | - `key` : string - The key to store the value in sessionStoage.
33 | - `initialValue` : T - The initial value to store in sessionStoage.
34 |
35 | Returns : An array with the following elements:
36 |
37 | - `value` : T - The value stored in sessionStoage.
38 | - `setValue` : (value: T) => void - A function to set the value in sessionStoage.
39 |
--------------------------------------------------------------------------------
/docs/docs/hooks/useSound.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useSound
3 | title: useSound
4 | sidebar_label: useSound
5 | ---
6 |
7 | Hook to play and manage sound effects.
8 |
9 | ### Usage
10 |
11 | ```jsx live
12 | function App() {
13 | const { play, pause, stop, setVolume, isPlaying, error } = useSound(
14 | "https://file-examples.com/storage/fe44eeb9cb66ab8ce934f14/2017/11/file_example_MP3_700KB.mp3"
15 | );
16 |
17 | return (
18 |
41 | );
42 | }
43 | ```
44 |
45 | ### API
46 |
47 | Parameters
48 |
49 | - `src` : `string` - The URL of the sound file to play.
50 |
51 | Returns : Object containing the following properties:
52 |
53 | - `play`: `() => void` - A function to play the sound.
54 | - `pause`: `() => void` - A function to pause the sound.
55 | - `stop`: `() => void` - A function to stop the sound.
56 | - `setVolume`: `(volume: number) => void` - A function to set the volume of the sound.
57 | - `isPlaying`: `boolean` - Whether the sound is currently playing.
58 | - `error`: `Error | null` - The error object if the sound fails to load.
59 |
--------------------------------------------------------------------------------
/docs/docs/hooks/useStopwatch.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useStopwatch
3 | title: useStopwatch
4 | sidebar_label: useStopwatch
5 | ---
6 |
7 | Hook to provide stopwatch functionality with SSR compatibility.
8 |
9 | ### Usage
10 |
11 | ```jsx live
12 | function App() {
13 | const { time, isRunning, start, stop, reset } = useStopwatch();
14 |
15 | return (
16 |
17 |
{time} seconds
18 |
21 |
24 |
25 |
26 | );
27 | }
28 | ```
29 |
30 | ### API
31 |
32 | Returns : An object with the following properties:
33 |
34 | - `time` : The current time elapsed in seconds.
35 | - `isRunning` : A boolean indicating whether the stopwatch is running.
36 | - `start` : A function to start the stopwatch.
37 | - `stop` : A function to stop the stopwatch.
38 | - `reset` : A function to reset the stopwatch.
39 |
--------------------------------------------------------------------------------
/docs/docs/hooks/useSystemTheme.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useSystemTheme
3 | title: useSystemTheme
4 | sidebar_label: useSystemTheme
5 | ---
6 |
7 | Hook to get the current system theme.
8 |
9 | ### Usage
10 |
11 | ```jsx live
12 | function App() {
13 | const theme = useSystemTheme();
14 |
15 | return (
16 |
17 |
Current System Theme: {theme}
18 |
19 | );
20 | }
21 | ```
22 |
23 | ### API
24 |
25 | Returns : `Theme`
26 |
27 | The current system theme, either light or dark.
28 |
--------------------------------------------------------------------------------
/docs/docs/hooks/useTitle.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useTitle
3 | title: useTitle
4 | sidebar_label: useTitle
5 | ---
6 |
7 | Hook to set and get the document title.
8 |
9 | ### Usage
10 |
11 | ```jsx live
12 | function App() {
13 | const { setTitle } = useTitle("Initial Title");
14 |
15 | const changeTitle = () => {
16 | setTitle("New Title");
17 | };
18 |
19 | return (
20 |
24 |
25 |
26 | );
27 | }
28 | ```
29 |
30 | ### API
31 |
32 | Parameter : `elementRef` : `React.RefObject` - The reference to the element to detect touch swipe gestures on.
33 |
34 | Returns : An object with the following properties:
35 |
36 | - `swipeState` : `SwipeState` - The swipe state object.
37 | - `SwipeState` : `{ direction: SwipeDirection, x: number, y: number }` -
38 | - The direction of the swipe and the x and y coordinates of the swipe event.
39 | - `SwipeDirection` : `'up' | 'down' | 'left' | 'right'` - The direction of the swipe.
40 | - `x` : `number` - The x coordinate of the swipe event.
41 | - `y` : `number` - The y coordinate of the swipe event.
42 | - `reset` : `() => void` - Resets the swipe state.
43 |
--------------------------------------------------------------------------------
/docs/docs/hooks/useUpdateEffect.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useUpdateEffect
3 | title: useUpdateEffect
4 | sidebar_label: useUpdateEffect
5 | ---
6 |
7 | Hook that runs an effect only when the component updates, skipping the initial render.
8 |
9 | ### Usage
10 |
11 | ```jsx live
12 | function App() {
13 | const [count, setCount] = useState(0);
14 |
15 | useUpdateEffect(() => {
16 | console.log("Effect runs on updates only");
17 | }, [count]);
18 |
19 | return (
20 |
21 |
Count: {count}
22 |
23 |
24 | );
25 | }
26 | ```
27 |
28 | ### API
29 |
30 | Parameters
31 |
32 | - `effect` : `Function` - The effect function to run.
33 | - `deps` : `DependencyList` - The dependencies to watch for changes. The effect will run only when these dependencies change.
34 |
--------------------------------------------------------------------------------
/docs/docs/hooks/useVibration.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useVibration
3 | title: useVibration
4 | sidebar_label: useVibration
5 | ---
6 |
7 | Hook to manage vibration on supported devices.
8 |
9 | ### Usage
10 |
11 | ```jsx live
12 | function App() {
13 | const { vibrate, stop, isSupported, error } = useVibration();
14 |
15 | return (
16 |
17 |
18 |
19 |
20 | {isSupported
21 | ? "Vibration is supported on this device."
22 | : "Vibration is not supported on this device."}
23 |
24 | {error &&
Error: {error.message}
}
25 |
26 | );
27 | }
28 | ```
29 |
30 | ### API
31 |
32 | Returns : An object with the following properties:
33 |
34 | - `vibrate` : `(pattern: number | number[]) => void` - Function to start vibration with the given pattern.
35 | - `stop` : `() => void` - Function to stop vibration.
36 | - `isSupported` : `boolean` - A boolean indicating whether vibration is supported on the device.
37 | - `error` : `Error | null` - An error object if an error occurred while trying to vibrate.
38 |
--------------------------------------------------------------------------------
/docs/docs/hooks/useWindowFocus.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useWindowFocus
3 | title: useWindowFocus
4 | sidebar_label: useWindowFocus
5 | ---
6 |
7 | Hook to track the focus state of the window.
8 |
9 | ### Usage
10 |
11 | ```jsx live
12 | function App() {
13 | const isWindowFocused = useWindowFocus();
14 |
15 | return (
16 |
17 |
Window Focus Hook
18 |
{isWindowFocused ? "Window is focused" : "Window is not focused"}
19 |
20 | );
21 | }
22 | ```
23 |
24 | ### API
25 |
26 | Returns : A boolean value indicating whether the window is focused or not, updated in real-time. Useful for tracking the if the user is currently interacting with the window.
27 |
--------------------------------------------------------------------------------
/docs/docs/hooks/useWindowScrollIntoPosition.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useWindowScrollIntoPosition
3 | title: useWindowScrollIntoPosition
4 | sidebar_label: useWindowScrollIntoPosition
5 | ---
6 |
7 | Hook to scroll the window to a specific position.
8 |
9 | ### Usage
10 |
11 | ```jsx live
12 | function App() {
13 | const scrollToPosition = useWindowScrollIntoPosition();
14 |
15 | const handleScroll = () => {
16 | scrollToPosition({ x: 100, y: 0, behavior: "smooth" });
17 | };
18 |
19 | return (
20 |
21 |
22 |
23 | );
24 | }
25 | ```
26 |
27 | ### API
28 |
29 | Returns : `ScrollToPosition`
30 |
31 | A function to scroll the window to the specified x and y coordinates.
32 |
33 | Function parameters
34 |
35 | `x` : A number indicating the x-coordinate to scroll to.
36 |
37 | `y` : A number indicating the y-coordinate to scroll to.
38 |
39 | `behavior` : A string indicating the scroll behavior ('auto' or 'smooth'). Defaults to 'auto'.
40 |
--------------------------------------------------------------------------------
/docs/docs/hooks/useWindowScrollPosition.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useWindowScrollPosition
3 | title: useWindowScrollPosition
4 | sidebar_label: useWindowScrollPosition
5 | ---
6 |
7 | Hook to get the current scroll position of the window.
8 |
9 | ### Usage
10 |
11 | ```jsx live
12 | function App() {
13 | const { x, y } = useWindowScrollPosition(200); // Optional throttle time
14 |
15 | return (
16 |
17 |
Scroll X: {x}
18 |
Scroll Y: {y}
19 |
20 | );
21 | }
22 | ```
23 |
24 | ### API
25 |
26 | Parameter
27 |
28 | - `throttleTime` : A number indicating the time in milliseconds to throttle the window scroll event. Defaults to 200.
29 |
30 | Returns : `ScrollPosition`
31 |
32 | - `x` : A number or null indicating the current horizontal scroll position of the window.
33 | - `y` : A number or null indicating the current vertical scroll position of the window.
34 |
--------------------------------------------------------------------------------
/docs/docs/hooks/useWindowSize.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useWindowSize
3 | title: useWindowSize
4 | sidebar_label: useWindowSize
5 | ---
6 |
7 | Hook to get the current window size.
8 |
9 | ### Usage
10 |
11 | ```jsx live
12 | function App() {
13 | const { width, height } = useWindowSize(200); // Optional throttle time
14 |
15 | return (
16 |
17 |
Window Width: {width}px
18 |
Window Height: {height}px
19 |
20 | );
21 | }
22 | ```
23 |
24 | ### API
25 |
26 | Parameter
27 |
28 | - `throttleTime` : A number indicating the time in milliseconds to throttle the window resize event. Defaults to 200.
29 |
30 | Returns : `WindowSize`
31 |
32 | - `width` : A number or null indicating the current width of the window.
33 | - `height` : A number or null indicating the current height of the window.
34 |
--------------------------------------------------------------------------------
/docs/docs/hooks/useWindowTouchSwipe.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: useWindowTouchSwipe
3 | title: useWindowTouchSwipe
4 | sidebar_label: useWindowTouchSwipe
5 | ---
6 |
7 | Hook to detect touch swipe gestures.
8 |
9 | ### Usage
10 |
11 | ```jsx live
12 | function App() {
13 | const { swipeState, reset } = useWindowTouchSwipe();
14 |
15 | return (
16 |
9 | 
10 | 
12 | 
14 | 
17 | 
18 | 
19 | 
20 | 
21 | 
22 | 
23 |
24 |
25 |
26 |