1.0.1 • Published 4 months ago
custom-react-hook-collection v1.0.1
Custom React Hooks Collection
A collection of useful custom React hooks to simplify state management, UI interactions, and API calls.
Installation
You can install this package using npm or yarn:
npm install custom-react-hooks
or
yarn add custom-react-hooks
Usage
Import the hooks you need into your React components:
import {
useClipboard,
useDarkMode,
useDebounce,
useFetch,
} from "custom-react-hooks";
Available Hooks
1. useClipboard
Copy text to clipboard.
const { copyToClipboard } = useClipboard();
<button onClick={() => copyToClipboard("Copied text!")}>Copy</button>;
2. useDarkMode
Toggle dark mode state.
const [isDarkMode, toggleDarkMode] = useDarkMode();
<button onClick={toggleDarkMode}>Toggle Dark Mode</button>;
3. useDebounce
Debounce a value with a delay.
const debouncedValue = useDebounce(searchTerm, 500);
4. useDocumentTitle
Set the document title dynamically.
useDocumentTitle("My Custom Title");
5. useFetch
Fetch data from an API.
const { data, loading, error } = useFetch(
"https://jsonplaceholder.typicode.com/users"
);
6. useGeolocation
Get the user's current location.
const { latitude, longitude } = useGeolocation();
7. useKeyPress
Detect when a key is pressed.
const isEnterPressed = useKeyPress("Enter");
8. useLocalStorage
Store and retrieve values from localStorage
.
const [name, setName] = useLocalStorage("name", "");
9. useMediaQuery
Detect screen size changes.
const isMobile = useMediaQuery("(max-width: 768px)");
10. useSessionStorage
Store values in sessionStorage
.
const [email, setEmail] = useSessionStorage("email", "");
11. useTimeout
Execute a function after a delay.
const { start, clear } = useTimeout(() => console.log("Timeout!"), 5000);
12. useToggle
Toggle a boolean state.
const [isOpen, toggle] = useToggle();
13. useWindowSize
Get window width and height.
const { width, height } = useWindowSize();
Contributing
Contributions are welcome! Feel free to open an issue or submit a pull request.
License
MIT