This hook is for managing cookies in your application.
\n\n```ts\nimport {useCookie} from \"r-custom-hooks\"\n\nexport default function CookieComponent() {\n const [cookie, updateCookie, removeCookie] = useCookie(\"name\", \"John Doe\")\n\n return (\n <>\nThis is a hook for debouncing values in your application.
\n\n```ts\nimport React, { useState } from 'react';\nimport {useDebounce} from 'r-custom-hooks';\n\nfunction MyComponent() {\n const [inputValue, setInputValue] = useState('');\n const debouncedValue = useDebounce(inputValue, 500);\n\n const handleChange = (event) => {\n setInputValue(event.target.value);\n };\n\n return (\nDebounced Value: {debouncedValue}
\nThis is a hook for adding event listeners to elements or the window.
\n\n```ts\nimport React, { useRef } from 'react';\nimport {useEventListener} from 'r-custom-hooks';\nimport { EventType } from './types';\n\nfunction MyComponent() {\n const myElementRef = useRef(null);\n\n const handleEvent = (event) => {\n // Your event handling logic here\n console.log('Event occurred:', event);\n };\n\n // Attach the event listener to the element\n useEventListener(EventType.CLICK, handleEvent, myElementRef);\n\n return (\nThis hook is for managing historical states with the ability to undo, redo, and navigate to specific states.
\n\n```ts\nimport React from 'react';\nimport {useHistoricalState} from 'r-custom-hooks';\n\nfunction MyComponent() {\n const [count, setCount, history] = useHistoricalState(0);\n\n const handleIncrement = () => {\n setCount(count + 1);\n };\n\n const handleDecrement = () => {\n setCount(count - 1);\n };\n\n const handleUndo = () => {\n history.previous(); // Go back to the previous state\n };\n\n const handleRedo = () => {\n history.next(); // Go forward to the next state (if available)\n };\n\n const handleGoTo = (index) => {\n history.go(index); // Go to a specific state in the history\n };\n\n return (\nCount: {count}
\n \n \n \n \n \nThis is a hook for detecting clicks outside a specified element
\n\n```ts\nimport React, { useRef, useState } from 'react';\nimport {useOutsideClick} from 'r-custom-hooks';\n\nfunction MyComponent() {\n const containerRef = useRef(null);\n const [isOpen, setIsOpen] = useState(false);\n\n // Define a callback function to close the element when clicked outside\n const closeElement = () => {\n setIsOpen(false);\n };\n\n // Attach the useOutsideClick hook to the container element and the closeElement callback\n useOutsideClick(containerRef, closeElement);\n\n return (\nThis hook is for executing a callback when a component unmounts.
\n\n```ts\nimport React from 'react';\nimport {useUnmount} from 'r-custom-hooks';\n\nfunction MyComponent() {\n // Define a cleanup function to run when the component unmounts\n const cleanup = () => {\n console.log('Component unmounted');\n // Perform any necessary cleanup here\n };\n\n // Attach the useUnmount hook with the cleanup function\n useUnmount(cleanup);\n\n // Your component logic here\n\n return (\nThis is my component.
\nThis hook is for handling media queries in your application.
\n\n```ts\nimport React from 'react';\nimport { useMediaQuery } from 'r-custom-hooks';\n\nfunction MyComponent() {\n const isMobile = useMediaQuery('(max-width: 600px)');\n\n return (\n{isMobile ? 'Mobile View' : 'Desktop View'}
\n