tgoop.com/React_lib/697
Create:
Last Update:
Last Update:
π₯9 ΠΏΠΎΠ»Π΅Π·Π½ΡΡ
ΡΡΠ½ΠΊΡΠΈΠΉ ΠΈ Ρ
ΡΠΊΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠΈΠ³ΠΎΠ΄ΡΡΡΡ ΠΏΡΠΎΠ΄Π²ΠΈΠ½ΡΡΠΎΠΌΡ React-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΡ Π΄Π»Ρ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ΠΌ, ΠΎΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΠ΅ΠΉ ΠΈ Π°ΡΡ
ΠΈΡΠ΅ΠΊΡΡΡΠΎΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ²
1. useDebounce
ΠΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ "ΠΎΡΠ»ΠΎΠΆΠΈΡΡ" Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ β ΠΏΠΎΠ»Π΅Π·Π½ΠΎ Π΄Π»Ρ Π²Π²ΠΎΠ΄Π°/ΠΏΠΎΠΈΡΠΊΠ°.
import { useEffect, useState } from 'react';
export function useDebounce<T>(value: T, delay = 300): T {
const [debounced, setDebounced] = useState(value);
useEffect(() => {
const timer = setTimeout(() => setDebounced(value), delay);
return () => clearTimeout(timer);
}, [value, delay]);
return debounced;
}
2. usePrevious
ΠΠΎΠ·Π²ΡΠ°ΡΠ°Π΅Ρ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅Π΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΡΠΎΠΏΠ° ΠΈΠ»ΠΈ ΡΡΠ΅ΠΉΡΠ°.
import { useRef, useEffect } from 'react';
export function usePrevious<T>(value: T): T | undefined {
const ref = useRef<T>();
useEffect(() => {
ref.current = value;
}, [value]);
return ref.current;
}
3. useOnClickOutside
ΠΠ°ΠΊΡΡΡΠΈΠ΅ ΠΌΠΎΠ΄Π°Π»ΠΎΠΊ, Π΄ΡΠΎΠΏΠ΄Π°ΡΠ½ΠΎΠ² ΠΏΡΠΈ ΠΊΠ»ΠΈΠΊΠ΅ Π²Π½Π΅.
import { useEffect } from 'react';
export function useOnClickOutside(ref: React.RefObject<HTMLElement>, handler: () => void) {
useEffect(() => {
const listener = (e: MouseEvent) => {
if (!ref.current || ref.current.contains(e.target as Node)) return;
handler();
};
document.addEventListener('mousedown', listener);
return () => document.removeEventListener('mousedown', listener);
}, [ref, handler]);
}
4. useIsMounted
ΠΠΎΠΌΠΎΠ³Π°Π΅Ρ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ ΠΏΠΎΡΠ»Π΅ ΡΠ°Π·ΠΌΠΎΠ½ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ.
import { useEffect, useRef } from 'react';
export function useIsMounted() {
const ref = useRef(false);
useEffect(() => {
ref.current = true;
return () => { ref.current = false; };
}, []);
return ref;
}
5. useEventCallback
ΠΠ°ΠΏΠΎΠΌΠΈΠ½Π°Π΅Ρ ΠΏΠΎΡΠ»Π΅Π΄Π½ΡΡ Π²Π΅ΡΡΠΈΡ ΠΊΠΎΠ»Π±ΡΠΊΠ° Π±Π΅Π· ΠΏΠΎΠ²ΡΠΎΡΠ½ΠΎΠ³ΠΎ ΡΠ΅Π½Π΄Π΅ΡΠ°.
import { useRef, useCallback } from 'react';
export function useEventCallback<T extends (...args: any[]) => any>(fn: T): T {
const ref = useRef(fn);
ref.current = fn;
return useCallback((...args: any[]) => ref.current(...args), []) as T;
}
6. useAsync
ΠΡΠΈΠ½Ρ ΡΠΎΠ½Π½ΡΠΉ Π²ΡΠ·ΠΎΠ² Ρ ΠΊΠΎΠ½ΡΡΠΎΠ»Π΅ΠΌ Π·Π°Π³ΡΡΠ·ΠΊΠΈ, ΠΎΡΠΈΠ±ΠΎΠΊ ΠΈ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ°.
import { useState, useCallback } from 'react';
export function useAsync<T>(asyncFn: () => Promise<T>) {
const [loading, setLoading] = useState(false);
const [data, setData] = useState<T | null>(null);
const [error, setError] = useState<unknown>(null);
const run = useCallback(async () => {
setLoading(true);
setError(null);
try {
const result = await asyncFn();
setData(result);
} catch (e) {
setError(e);
} finally {
setLoading(false);
}
}, [asyncFn]);
return { loading, data, error, run };
}
7. useLocalStorage
ΠΡΠΎΡΡΠΎΠΉ Ρ ΡΠΊ Π΄Π»Ρ Ρ ΡΠ°Π½Π΅Π½ΠΈΡ Π΄Π°Π½Π½ΡΡ Π²
localStorage.
import { useState, useEffect } from 'react';
export function useLocalStorage<T>(key: string, initial: T) {
const [value, setValue] = useState<T>(() => {
const json = localStorage.getItem(key);
return json ? JSON.parse(json) : initial;
});
useEffect(() => {
localStorage.setItem(key, JSON.stringify(value));
}, [key, value]);
return [value, setValue] as const;
}
8. useMediaQuery
Π Π°Π±ΠΎΡΠ° Ρ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠ°ΠΌΠΈ Π² React Π±Π΅Π· CSS.
import { useEffect, useState } from 'react';
export function useMediaQuery(query: string): boolean {
const [matches, setMatches] = useState(() => window.matchMedia(query).matches);
useEffect(() => {
const media = window.matchMedia(query);
const listener = () => setMatches(media.matches);
media.addEventListener('change', listener);
return () => media.removeEventListener('change', listener);
}, [query]);
return matches;
}
9. useToggle
ΠΠΈΠ½Π°ΡΠ½ΡΠΉ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Ρ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ (on/off).
import { useCallback, useState } from 'react';
export function useToggle(initial = false) {
const [state, setState] = useState(initial);
const toggle = useCallback(() => setState(prev => !prev), []);
return [state, toggle] as const;
}
βοΈ @React_lib
BY React
Share with your friend now:
tgoop.com/React_lib/697