Una colección de hermosos (y ojalá que útiles) hooks de React para acelerar tu desarrollo de componentes y hooks
🇬🇧 English | 🇨🇳 简体中文 | 🇮🇹 Italiano | 🇪🇸 Español | 🇺🇦 Ukrainian | 🇧🇷 Brazilian Portuguese | 🇵🇱 Polski | 🇯🇵 日本語
React custom hooks permite abstraer la lógica de negocio de los componentes en funciones únicas reutilizables.
Hasta ahora hemos notado que la mayoría de los hooks que hemos creado y compartido en nuestros proyectos tienen un núcleo bastante similar,
un núcleo que a menudo implica los mismos patrones de desarrollo (llamadas, referencias y ciclos de vida).
Por esta razón hemos tratado de resumir esa esencia en beautiful-react-hooks:una colección de (esperamos) útiles Para que React hooks
sirva otras empresas y profesionales ayudando a acelerar su proceso de desarrollo.
Además, creamos un API conciso pero concreto teniendo en cuenta la legibilidad del código, centrándonos en mantener la curva de aprendizaje
lo más baja posible para que pueda ser usada y compartida en equipos más grandes.
-- Por favor, antes de utilizar un hook, leer su documentación! --
- API Consistente.
- Pequeña y ligera.
- Fácil de aprender.
Usando npm:
$ npm install beautiful-react-hooksUsando 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
Las contribuciones son muy bienvenidas y deseadas.
Para presentar su custom hook, por favor asegúrese de leer nuestro CONTRIBUTING guidelines.
Antes de enviar un nuevo merge request, por favor asegúrese:
- Ha actualizado el package.json version e informó de sus cambios en el archivo CHANGELOG
- Asegúrate de ejecutar
npm testynpm buildantes de enviar el merge request. - Asegúrate de que has añadido la documentación de tu custom hook (* puedes usar el HOOK_DOCUMENTATION_TEMPLATE para documentar tu custom hook*).
- Asegúrate de que has actualizado el
index.d.tsel archivo de tus tipo de hook.
Icon desde Freepik y www.flaticon.com