Collection of reusable React hooks
npm install captain-react-hooksA collection of reusable React hooks for common use cases.
``bash`
npm install captain-react-hooksor
yarn add captain-react-hooks
A hook that automatically adjusts the height of a textarea based on its content.
`tsx
import { useAutosizeTextArea } from "captain-react-hooks";
const MyComponent = () => {
const [value, setValue] = useState("");
const textAreaRef = useRef
useAutosizeTextArea(textAreaRef.current, value);
return (
value={value}
onChange={(e) => setValue(e.target.value)}
/>
);
};
`
A hook that triggers a callback when clicking outside of a specified element. Useful for closing modals, dropdowns, etc.
`tsx
import { useOutsideClick } from "captain-react-hooks";
const MyComponent = () => {
const [isOpen, setIsOpen] = useState(false);
const ref = useRef(null);
useOutsideClick(() => setIsOpen(false), ref);
return (
$3
A hook that provides a function to copy text to the clipboard with error handling.
tsx
import { useCopyToClipboard } from "captain-react-hooks";const MyComponent = () => {
const { copy, error } = useCopyToClipboard();
const handleCopy = async () => {
const success = await copy("Text to copy");
if (success) {
alert("Copied!");
} else {
alert(
Failed to copy: ${error?.message});
}
}; return ;
};
`$3
A hook that triggers a callback when the escape key is pressed. Useful for closing modals or canceling actions.
tsx
import { useEscapeKey } from "captain-react-hooks";const MyComponent = () => {
const [isOpen, setIsOpen] = useState(false);
useEscapeKey(() => setIsOpen(false));
return (
{isOpen && Press ESC to close}
);
};
`$3
A hook for setting up declarative intervals. Useful for creating polling mechanisms or periodic updates.
tsx
import { useInterval } from "captain-react-hooks";const MyComponent = () => {
const [count, setCount] = useState(0);
useInterval(() => {
setCount(count + 1);
}, 1000); // Updates every second
return
Count: {count};
};
`$3
A hook that detects when a specific key is pressed. Perfect for keyboard shortcuts or accessibility features.
tsx
import { useKeyPress } from "captain-react-hooks";const MyComponent = () => {
const isSpacePressed = useKeyPress(" ");
return
{isSpacePressed ? "Space is pressed!" : "Press space..."};
};
`$3
A hook that syncs state with localStorage, providing persistent state across page reloads.
tsx
import { useLocalStorage } from "captain-react-hooks";const MyComponent = () => {
const [name, setName] = useLocalStorage("user-name", "");
return (
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="Your name will be remembered"
/>
);
};
`$3
A hook that prevents body scrolling. Useful for modals, drawers, or full-screen menus.
tsx
import { useLockBodyScroll } from "captain-react-hooks";const Modal = ({ isOpen }) => {
useLockBodyScroll(isOpen);
return isOpen ? (
Modal content (body scroll is locked)
) : null;
};
`$3
A hook that detects when an element enters the viewport. Perfect for implementing infinite scroll or lazy loading.
tsx
import { useOnScreen } from "captain-react-hooks";const MyComponent = () => {
const elementRef = useRef(null);
const isVisible = useOnScreen(elementRef, "-100px"); // 100px threshold
return (
{isVisible ? "Element is visible!" : "Scroll to see me!"}
);
};
``Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
MIT