react-beautiful-hooks-library

Super useful react + ts hooks all in one place

Installation

Install this package with npm

1  npm i react-beautiful-hooks-library

Hooks list

useDebounce

Delays updating a value until a specified amount of time has passed

1import {useDebounce} from 'react-beautiful-hooks-library'
2
3export default function App() {
4    const func = () => {
5        console.log("this needs to be debounced");
6    }
7    const debouncedFunction = useDebounce(func, 100);
8  return (<YourComponents />);
9}

useBroadcastChannel

Leverages the BroadcastChannel API to enable real-time communication between different tabs or windows of the same origin

1import {useBroadcastChannel} from 'react-beautiful-hooks-library'
2
3export default function App() {
4    const {messages, sendMessage, isConnected} = useBroadcastChannel("channel name")
5  return (<YourComponents />);
6}

useRefCallback

Combines useRef and useCallback to dynamically assign and track a reference (ref) to a DOM element or component instance. It is useful when you need to perform actions when a ref changes

1import {useRefCallback} from 'react-beautiful-hooks-library'
2
3export default function App() {
4    const [message, sendMessage] = useState("");
5    const func = () => {
6        setMessage("hello world");
7    }
8    const refCallbackFunc = useRefCallback(func, [message]);
9  return (<YourComponents onClick={refCallbackFunc} />);
10}

usePrevious

Tracks the previous value of a state.

1import {usePrevious} from 'react-beautiful-hooks-library'
2
3export default function App() {
4  const [count, setCount] = useState(0);
5  const prevCount = usePrevious(count);
6
7  return (
8    <div>
9      <p>Current: {count}</p>
10      <p>Previous: {prevCount ?? "N/A"}</p>
11      <button onClick={() => setCount((prev) => prev + 1)}>Increment</button>
12    </div>
13  );
14}

usePolling

Executes polling for a given function

1import {usePolling} from 'react-beautiful-hooks-library'
2
3function App() {
4  const { start, pause, stop, result } = usePolling(async () => {
5    await new Promise(resolve => setTimeout(resolve, 1000)); // Simulating async delay
6    return "hello";
7  }, 5000);
8
9  useEffect(() => {
10    start();
11    return () => stop();
12  }, []);
13
14  return (
15    <>
16      <h1>{result}</h1>
17      <button onClick={pause}>Pause</button>
18      <button onClick={start}>Resume</button>
19      <button onClick={stop}>Stop</button>
20    </>
21  );
22}
23
24export default App;
25