Una collezione di hooks leggeri (e si spera utili) per velocizzare lo sviluppo di hooks personalizzati e componenti React
🇬🇧 English | 🇨🇳 简体中文 | 🇮🇹 Italiano | 🇪🇸 Español | 🇺🇦 Ukrainian | 🇧🇷 Brazilian Portuguese | 🇵🇱 Polski | 🇯🇵 日本語
In un'applicazione React, gli hooks ci permettono di astrarre complesse logiche di business in singole funzioni riutilizzabili.
Fino ad ora abbiamo notato che la maggior parte degli hooks che abbiamo creato e condiviso nei nostri progetti, hanno un
core piuttosto simile tra loro, un core che coinvolge spesso gli stessi pattern di sviluppo (callback, referenze e cicli di vita).
Per queato motivo abbiamo cercato di semplificare e concentrare questo core in beautiful-react-hooks: una collezione di piccoli hooks
riutilizzabili per aiutare altri sviluppatori (e società) a velocizzare i loro processi di sviluppo.
Abbiamo cercato di creare una API che fosse sia concisa che coerente, concentrandoci sulla scalabilità e la leggibilità del codice,
mantenendo la curva d'apprendimento il più bassa possible.
-- Prima di usare qualsiasi hook, leggi la documentazione! --
- API concisa e coerente
- Piccole funzioni riutilizzabili
- Facile da imparare
Usando npm:
$ npm install beautiful-react-hooksoppure usando yarn:
$ yarn add beautiful-react-hooks- useMutableState
- useInfiniteScroll
- useObservable
- useEvent
- useGlobalEvent
- usePreviousValue
- useValueHistory
- useValidatedState
- useMediaQuery
- useOnlineState
- useViewportSpy
- useViewportState
- useSpeechRecognition and useSpeechSynthesis
- useGeolocation, useGeolocationState and useGeolocationEvents
- useDrag, useDropZone and useDragEvents
- useMouse, useMouseState and useMouseEvents
- useTouch, useTouchState and useTouchEvents
- useLifecycle, useDidMount and useWillUnmount
- useWindowResize
- useWindowScroll
- useRequestAnimationFrame
- useResizeObserver
- useTimeout
- useInterval
- useDebouncedCallback
- useThrottledCallback
- useLocalStorage
- useSessionStorage
- useDefaultedState
- useRenderInfo
- useSwipe, useHorizontalSwipe and useVerticalSwipe
- useSwipeEvents
- useConditionalTimeout
- useCookie
- useDarkMode
- useUpdateEffect
- useIsFirstRender
- useMutationObserver
- useAudio
- useObjectState
- useToggle
- useQueryParam
- useQueryParams
- useSearchQuery
- useURLSearchParams
La tua contribuzione è benvenuta!
Per inviare il tuo custom hook, leggi le nostre linee guida in materia di contribuzioni.
Prima di inviarci la tua pull request, per favore sii sicuro che:
- Hai aggiornato la versione nel file package.json ed hai aggiunto i cambiamenti che hai fatto nel file CHANGELOG.
- Hai fatto partire i testi con
npm tested hai fatto una build locale connpm build. - Hai aggiunto la documentazione del tuo custom hook (puoi partire dal template HOOK_DOCUMENTATION_TEMPLATE, per scrivere la tua documentazione).
- Hai aggiornato il file
index.d.tsaggiungendo i tipi Typescript del tuo hook.
Icona fatta dall'utente Freepik su www.flaticon.com