Uma coleção de React hooks lindos (e esperamos que úteis) para acelerar o desenvolvimento de seus componentes e hooks
🇬🇧 English | 🇨🇳 简体中文 | 🇮🇹 Italiano | 🇪🇸 Español | 🇺🇦 Ukrainian | 🇧🇷 Brazilian Portuguese | 🇵🇱 Polski | 🇯🇵 日本語
React hooks permitem a abstrair a lógica de negócios dos componentes em funções únicas e reutilizáveis.
Até agora, descobrimos que a maioria dos hooks que criamos e, portanto, compartilhamos entre nossos projetos internos, muitas vezes têm uma
essência semelhante que envolve referências de callback, eventos e ciclo de vida dos componentes.
Por este motivo, tentamos resumir esta essência em beautiful-react-hooks: uma coleção de React hooks úteis (assim esperamos)
para possivelmente ajudar outras empresas e profissionais à agilizarem seus processos de desenvolvimento.
Além disso, criamos uma API simples porém sólida, tendo em mente a legibilidade do código, com o objetivo de manter a curva de aprendizado o
mais baixa possível, para que possa ser usada e compartilhada em equipes maiores.
-- Por favor, antes de utilizar qualquer hook, leia a sua documentação! --
- API simples
- Pequeno e leve
- Fácil de aprender
utilizando npm:
$ npm install beautiful-react-hooksutilizando yarn:
$ yarn add beautiful-react-hooks- useMutableState
- useInfiniteScroll
- useObservable
- useEvent
- useGlobalEvent
- usePreviousValue
- useValueHistory
- useValidatedState
- useMediaQuery
- useOnlineState
- useViewportSpy
- useViewportState
- useSpeechSynthesis and useSystemVoices
- 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
Contribuições são muito bem-vindas e desejadas.
Para enviar sua hook, por favor, certifique-se de ler o nosso arquivo CONTRIBUTING.
Antes de enviar um novo merge request, por favor certifique-se:
- Você atualizou a versão no package.json e relatou suas alterações no arquivo CHANGELOG
- Certifique-se de rodar
npm testenpm buildantes de enviar o merge request. - Certifique-se de que você adicionou a documentação da sua hook (você pode utilizar como base o HOOK_DOCUMENTATION_TEMPLATE para documentar sua hook).
- Certifique-se de que atualizou o arquivo
index.d.tscom os tipos da sua hook.
Ícone criado por Freepik / www.flaticon.com