git.iko.soy/urbit.org
on master help sign in
urbit.org/lib/hooks.js
71 lines 1.9 kB history raw
1import { useState, useLayoutEffect, useCallback, useEffect } from "react";
3export function useLockBodyScroll() {
4 useLayoutEffect(() => {
5 // Get original body overflow
6 const originalStyle = window.getComputedStyle(document.body).overflow;
7 // Prevent scrolling on mount
8 document.body.style.overflow = "hidden";
9 // Re-enable scrolling when component unmounts
10 return () => (document.body.style.overflow = originalStyle);
11 }, []); // Empty array ensures effect is only run on mount and unmount
14export function useCopyToClipboard(text, notifyTimeout = 1000) {
15 const [copyStatus, setCopyStatus] = useState("inactive");
16 const copy = useCallback(() => {
17 navigator.clipboard.writeText(text).then(
18 () => setCopyStatus("copied"),
19 () => setCopyStatus("failed")
20 );
21 }, [text]);
23 useEffect(() => {
24 if (copyStatus === "inactive") {
25 return;
26 }
28 const timeoutId = setTimeout(
29 () => setCopyStatus("inactive"),
30 notifyTimeout
31 );
33 return () => clearTimeout(timeoutId);
34 }, [copyStatus]);
36 return [copyStatus, copy];
39function getStorageValue(key, defaultValue) {
40 // getting stored value
41 if (typeof window !== "undefined") {
42 const saved = window.localStorage.getItem(key);
43 const initial = saved !== null ? JSON.parse(saved) : defaultValue;
44 return initial;
45 }
48export const useLocalStorage = (key, defaultValue) => {
49 const [value, setValue] = useState(() => {
50 return getStorageValue(key, defaultValue);
51 });
53 useEffect(() => {
54 // storing input name
55 window.localStorage.setItem(key, JSON.stringify(value));
56 }, [key, value]);
58 return [value, setValue];
59};
61export const useInputChange = () => {
62 const [input, setInput] = useState({});
64 const handleInputChange = (e) =>
65 setInput({
66 ...input,
67 [e.currentTarget.name]: e.currentTarget.value,
68 });
70 return [input, handleInputChange];
71};