Documentación oficial ? Documentos de React Hooks
Discusiones
Tutoriales
- “Dar sentido a React Hooks” por Dan Abramov
- “De React.Component a hooks” por Octave Raimbault
- “React Hooks: ¿Qué va a pasar con mis pruebas?” por Kent C. Dodds
- “Gestión de estado con React Hooks – Sin Redux o API de contexto” por André Gardi
- “¿Cómo obtener datos con React Hooks?” por Robin Wieruch
- Primer sobre React Hooks
- React Hooks: una inmersión más profunda con useContext y useReducer
- “Uso de enlaces personalizados de React para simplificar formularios” por James King
- Prueba de un gancho React personalizado para obtener datos con Axios
- La guía para aprender React Hooks (ejemplos y tutoriales) por Eric Bishard
- “Probablemente probando React Hooks” por Dave Cooper
- Reaccionar con el ejemplo: ganchos
Videos
- ?ReactConf 2018: React Today and Tomorrow por Sophie Alpert y Dan Abramov Anuncio oficial y primera demostración.
- ? ReactConf 2018: 90% más limpio React de Ryan Florence
- ? React Hooks: una introducción completa de Harry Wolff
- ? Lista de reproducción React Hooks de Ben Awad
- ? Lista de reproducción React Hooks de Josh Ribakoff
- ? Lista de reproducción React Hooks de Michael Chan
- ? Ganchos personalizados en React de Tanner Linsley
Podcasts
Instrumentos
-
eslint-plugin-react-hooks
-
hooks.macro
Macros de Babel para la invalidación automática de memorias - Kit de inicio CodeSandbox
- React Hooks Snippets para VS Code
-
hook-into-props
Ayudante para construir HOC usando ganchos. Útil para usar ganchos con componentes de clase. -
react-universal-hooks
React Universal Hooks: solo use ****** en todas partes, componentes funcionales o de clase - Jooks : prueba unitariamente tus ganchos personalizados burlándote de la API de Hooks de React (useState, etc.)
-
react-hooks-testing-library
Biblioteca para crear pruebas unitarias para enlaces React personalizados.
Catálogos
- @ react-hookz / web : una biblioteca de enlaces de React de propósito general construida teniendo en cuenta la compatibilidad con SSR y el cuidado.
- ahooks Una colección de React Hooks específicamente destinados a aplicaciones empresariales.
- hermosos-react-hooks?) Una colección de ganchos para acelerar sus componentes y el desarrollo de ganchos personalizados.
- Capitán garfio Modesta lista de ganchos.
- crooks Una colección de React Hooks únicos.
- hooks-by-example Colección de ejemplos de uso de ganchos del mundo real para principiantes.
- Hooks.guide Colección de ganchos de React seleccionados por la comunidad.
- recetas-reaccionar ?? Colección de recetas esenciales de gancho ?
- Colección de búsquedas de React Hooks
- Girasol(?) Colección de React Hooks que devuelven componentes de antd.
- useHooks (?) Una nueva receta de React Hook todos los días.
- Use Hooks Una colección de React Hooks reutilizables.
Paquetes
-
@21kb/react-hooks
Un conjunto de React Hooks para engancharse . -
@d2k/react-devto
React hook para solicitudes de API de Dev.to -
@d2k/react-github
Reaccionar gancho para solicitudes de API de Github -
@d2k/react-localstorage
React hook que se encarga de actualizar y borrar los valores de almacenamiento local mientras los mantiene sincronizados con sus componentes. -
@elgorditosalsero/react-gtm-hook
React hook para manejar fácilmente el Google Tag Manager. -
@hookstate/core
Gestión de estado moderna, muy rápida y ampliable para React. -
@jzone/react-request-hook
?React hook para solicitud personalizada, compatible con varias bibliotecas, soporte redux -
@kevinwolf/formal
Primitivas de gestión de formularios elegantes para la era de los ganchos de reacción. -
@koale/useworker
⚙️ Ejecución de tareas pesadas en segundo plano con trabajadores web, sin bloquear la interfaz de usuario -
@marvelsq/use-properties-hook
Funciones de instancia dentro de FunctionComponent comoclass-properties
e igual enShallowCompare
-
@rehooks/component-size
React hook para determinar el tamaño de un componente. -
@rehooks/document-title
Reaccionar gancho para actualizar el título del documento. -
@rehooks/document-visibility
React hook para suscribirse a la visibilidad del documento. -
@rehooks/input-value
Reaccionar gancho para crear valores de entrada. -
@rehooks/local-storage
React hook que se sincronizalocalStorage[key]
con la comp. -
@rehooks/network-status
Reaccionar gancho para obtener el estado de la red. -
@rehooks/online-status
React Hook para estado en línea. -
@rehooks/window-scroll-position
Reaccionar gancho para obtener ventanax
yy
posición. -
@rehooks/window-size
Reaccionar gancho para suscribirse al tamaño de la ventana. -
@rekindle/use-request
? Reaccionar gancho para hacer una solicitud. -
@staltz/use-profunctor-state
React Hook para la gestión del estado con Profunctor Optics -
@webscopeio/react-health-check
? Gancho ligero de React para verificar el estado de los servicios API. -
@wellyshen/use-web-animations
? React hook para animaciones manipulables y de alto rendimiento utilizando la API de animaciones web. -
@withvoid/melting-pot
Biblioteca de la utilidad React hook. -
ahooks/usetable
Una solución progresiva para la escena de la tabla de consultas. -
concent
Una gestión estatal que se adapta para reaccionar, es simple, predecible, progresiva y eficiente. -
constate
Transforme su estado local en estado global usandouseContextState
yuseContextReducer
. -
conuse
Compartir gancho con contexto -
easy-peasy
Estado global fácil de usar para React. -
fetch-suspense
React hook para Fetch API con soporte para Suspense. -
graphql-hooks
Cliente GraphQL de enganches mínimos primero. -
mobx-react-lite
Enlaces de React ligeros para MobX basados en ganchos de React experimentales. -
modali
Un delicioso componente de diálogo modal para React, creado desde cero para admitir React Hooks. -
moment-hooks
Una biblioteca que contiene ganchos de reacción genéricos -
nice-hooks
? Un montón de buenos ganchos para hacer que los ganchos de reacción sean más fáciles de usar (useState callback / ciclo de vida / variable de instancia) -
promise-hook
React hook para simplificar la búsqueda de datos basada en Promise. -
reactive-react-redux
Enlace de React Redux con React Hooks y Proxy -
react-async-hook
React hook para obtener datos ad-hoc en sus componentes React. -
react-cached-callback
React hooks para almacenar en caché muchas devoluciones de llamada por clave, por ejemplo, en bucles. -
react-context-refs
Reaccionar ganchos para obtener referencias de elementos a través del contexto. -
react-cookie
Reaccionar ganchos para cookies universales. -
react-cool-dimensions
? React hook para medir el tamaño de un elemento y manejar componentes sensibles. -
react-cool-form
? Reaccionar ganchos para el estado y la validación de formularios, menos código y más rendimiento. -
react-cool-inview
?️ React hook para monitorear que un elemento ingresa o sale de la ventana gráfica (u otro elemento). -
react-cool-onclickoutside
? Reaccionar gancho para escuchar clics fuera de los componentes. -
react-cool-portal
? React hook for Portals, que muestra modales, menús desplegables, información sobre herramientas, etc. para o bien. -
react-cool-virtual
♻️ Un pequeño gancho de React para renderizar grandes conjuntos de datos como una brisa. -
react-countdown-hook
Gancho de cuenta regresiva simple pero poderoso para React. Desarrollado porrequestAnimationFrame
. -
react-darkreader
? Un React Hook para agregar un modo oscuro / nocturno a su sitio inspirado en darkreader. -
react-declare-form
React biblioteca de formularios declarativos basada en hook. -
react-deep-hooks
Reaccionar ganchos para dependencias no primitivas. -
react-dom-status-hook
React hook por suscribirse alDOMContentLoaded
evento. -
react-enhanced-reducer-hook
Una alternativa auseReducer
eso acepta middlewares. -
react-fetch-hook
React hook para usar cómodamente la API de Fetch. -
react-firebase-hooks
Una colección de ganchos para usar con Firebase . -
react-form-stateful
Biblioteca de formularios. Expone el envío para permitir que la biblioteca se extienda a través de efectos secundarios. -
react-hanger
Una pequeña colección de ganchos utilitarios. -
react-hook-mighty-mouse
React hook que rastrea los eventos del mouse en el elemento seleccionado ? -
react-hook-mousetrap
Un gancho para activar devoluciones de llamada en teclas o combinaciones de teclas, alimentado por ratonera. -
react-hookedup
Una colección de útiles ganchos de React. -
react-hook-form
Validación de formularios sin complicaciones. -
react-hook-layout
Gestión de diseño en React. -
react-hooks-async
Reaccionar hooks personalizados para funciones asincrónicas con abortabilidad y componibilidad -
react-hooks-global-state
Una simple gestión del estado global. -
react-hooks-image-size
Enganche para obtener el tamaño de imagen natural de la URL. -
react-hooks-lib
Un conjunto de ganchos react reutilizables. -
react-hooks-svgdrawing
A ganchos para dibujar svg. -
react-hooks-use-modal
Un gancho para abrir el modal fácilmente. -
react-hooks-visible
Un gancho para la visibilidad de los elementos. Utiliza la API de observador de intersecciones. -
react-hooks-worker
Reaccionar ganchos personalizados para trabajadores web -
react-hotkey-hook
Reaccionar gancho para teclas de acceso rápido. -
react-i18next
Internacionalización para reaccionar bien. -
react-immer-hooks
useState y useReducer usando Immer para actualizar el estado. -
react-indicative-hooks
Hooks que envuelven una biblioteca de validación de datos llamada Indicative -
react-intersection-visible-hook
React hook para rastrear la visibilidad de un componente funcional. -
react-media-hook
Reaccionar gancho para consultas de medios. -
react-metatags-hook
React Hook para administrar etiquetas meta html. -
react-native-react-bridge
Un complemento de React Native para ejecutar React y manejar la comunicación entre ellos. -
react-optimistic-ui-hook
⚛️ Implementación mínima del patrón de “interfaz de usuario optimista” con un gancho React -
react-page-name
React Hook para administrar el título de la página. -
react-peer-data
Contenedor de reacción para la biblioteca PeerData para archivos, transmisión / intercambio de medios mediante WebRTC. -
react-pirate
Reaccionar el ciclo de vida y los ganchos de utilidades. -
react-powerhooks
Api de Hooks para componentes react-powerplug. -
react-promiseful
Un componente React y un gancho para representar a los niños condicionalmente en función de un estado de promesa. -
react-query
Ganchos para buscar, almacenar en caché y actualizar datos asincrónicos en React. -
react-recaptcha-hook
React hook para google-recaptcha v3 -
react-recipes
?? Colección de recetas esenciales de gancho ? -
react-request-hook
Solicitudes de API gestionadas, cancelables y seguras. -
react-responsive
Reaccionar el módulo de consulta de medios. -
react-rocketjump
Maneje el estado y los efectos secundarios como una brisa. -
react-screen-wake-lock
Implementación de React de la API de Screen Wake Lock. Proporciona una forma de evitar que los dispositivos atenúen o bloqueen la pantalla cuando una aplicación necesita seguir ejecutándose -
react-script-hook
Reaccionar gancho para cargar dinámicamente un script externo y saber cuándo está cargado -
react-selector-hooks
Colección de fábricas de selectores memorizados basados en ganchos para declaraciones fuera del render. -
react-speech-kit
Ganchos para el reconocimiento de voz y la síntesis de voz del navegador. -
react-state-patterns
Paquete de utilidades para crear implementaciones reutilizables de patrones de proveedores de estado de React a partir de hooks. -
react-swipeable
Reaccionar el gancho del controlador de eventos de deslizamiento. -
react-tracked
Estado global simple y rápido con React Context. Elimina las repeticiones de renderizado innecesarias sin problemas. -
react-uniformed
? Formularios declarativos de React usando ganchos. -
react-use-api
Datos de solicitud HTTP asíncronos para axios. Diseñado para diversos estados de interfaz de usuario, SSR y almacenamiento en caché previo de datos. -
react-use-browser
Un gancho que permite la hidratación del lado del cliente de los componentes renderizados del lado del servidor cuando el marcado producido por el servidor debe diferir del marcado de la aplicación del cliente final. -
react-use-calendar
Un gancho para implementar un calendario con eventos. -
react-use-clipboard
Un gancho que copia texto al portapapeles de un usuario. -
react-use-d3
Un gancho de React para usar D3. -
react-use-data-loader
Reaccionar gancho para cargar datos -
react-use-fetch-factory
React hook que se encarga de buscar y seleccionar datos con redux. -
react-use-fetch-with-redux
React hook que almacena en caché las solicitudes de API que funcionan con redux. -
react-use-form-state
React hook para administrar el formulario y el estado de las entradas. -
react-use-id-hook
React hook para generar cadenas de identificación únicas seguras para SSR. -
react-use-idb
Reaccionar gancho para almacenar valor en el navegador usandoindexDB
. -
react-use-infinite-loader
♾️ ⏳ Gancho superligero de carga infinita (desplazamiento) para aplicaciones React -
react-use-input
? Un gancho cuyo setter se puede asignar directamente a las entradas HTML. -
react-use-lazy-load-image
⚡ Agregue la carga diferida de imágenes a su aplicación React con facilidad -
react-use-message-bar
Un simple gancho de React para barras de mensajes. -
react-use-modal
React hook para administrar modal. -
react-use-path
El enrutador de reacción de estilo de gancho más pequeño. -
react-use-scroll-position
Reaccionar gancho para usar la posición de desplazamiento. -
react-use-trigger
Reaccionar gancho para el efecto de disparo desde cualquier lugar del código -
react-use-watch
Un gancho de React sobre disparadores solo se activa una vez cuando las dependencias han cambiado. -
react-use-wavelet
React hooks para conectarse a la plataforma de contrato inteligente Wavelet -
react-use
Colección de ganchos imprescindibles. -
react-useFormless
Reaccionar gancho para manejar el estado de los formularios. -
react-usemiddleware
React hook para usar middlewares de Redux existentes (como thunk o saga) conuseReducer
. -
react-useportal
? usePortal, React hook para portales -
react-user-media
React wrapper paranavigator.getUserMedia
. -
react-wait
Gancho de administración de cargador complejo para aplicaciones React. -
react-window-communication-hook
React hook para comunicarse entre los contextos del navegador (pestañas, ventanas, iframes). -
react-with-hooks
Ponyfill para la API de React Hooks propuesta. -
reaktion
useState como un gancho para la gestión global del estado. -
redhooks
Gestión del estado global con React Hooks. También admite el uso de middleware como redux-thunk o redux-saga o su propio middleware personalizado. -
redux-react-hook
React hook para acceder al estado mapeado desde una tienda Redux. -
region-core
Un marco de gestión del estado global con un ganchouseProps
. -
rehooks-visibility-sensor
Comprueba si un elemento se ha desplazado a la vista o no. -
resynced
Gestión de múltiples estados usando React Hooks API. -
reto
Tienda React flexible y eficiente con ganchos. -
rrh
Ganchos de reacción súper simples para react-redux. -
rxjs-hooks
Una forma fácil de usar RxJS v6 + con react hooks. -
scroll-data-hook
Devuelve información sobre la velocidad de desplazamiento, la distancia, la dirección y más. -
style-hook
? wirte css en js con react hooks. -
swr
Biblioteca React Hooks para la obtención remota de datos. -
the-platform
Las API del navegador se convirtieron en React Hooks y elementos React compatibles con Suspense para situaciones comunes. -
trousers
? Una biblioteca CSS-in-JS de hooks-first, centrada en la semántica y el rendimiento en tiempo de ejecución -
use-abortable-fetch
Reaccionar gancho que busca y aborta cuando los componentes se descargan o se realiza una solicitud diferente. -
use-action
Casi lo mismo para useEffect, pero no diferido. -
use-as-bind
React hook para usar as-bind con una fuente WASM. -
use-async-memo
React hook para generar datos memorizados asincrónicos. -
use-autocomplete
Un gancho de React para devolver valores de autocompletar para una cadena de búsqueda dentro de una matriz. -
use-axios-react
React CRUD hooks para axios, lista completa de ejemplos -
use-boolean
Ayudantes convenientes para manejar el estado booleano. -
use-browser-history
Un gancho de React para manejar los eventos del historial del navegador. -
use-cart
Un gancho de React que le brinda la funcionalidad de carrito de compras. -
use-click-away
Reaccione el gancho cuando desee que se invoque una devolución de llamada cuando no se hizo clic en un elemento DOM. -
use-clippy
Un gancho de React para leer y escribir en el portapapeles del usuario. -
use-context-selector
Reaccionar el gancho useContextSelector en el área de usuario. -
use-controlled-input-number
Reaccione el gancho para convertir el comportamiento de entrada numérica en más o menos lo que espera. -
use-countries
Gancho de reacción personalizado para listar países e idiomas. -
use-debounce
Un gancho antirrebote para React. -
use-deep-compare
Son los ganchos useEffect / useMemo / useCallback de react, excepto que usa una comparación profunda en las entradas. -
use-deep-compare-effect
? Es el gancho useEffect de react, excepto que usa una comparación profunda en las entradas, no la igualdad de referencia. -
use-detect-print
Reaccionar gancho para detectar cuándo se está imprimiendo una página. -
use-dimensions
React Native hook para obtener las dimensiones de la pantalla y la ventana. -
use-double-click
React hook para clics dobles continuos y combinación de eventos de clic y doble clic -
use-eazy-auth
Reaccionar ganchos para manejar cosas de autenticación. -
use-events
Un conjunto de React Hooks para manejar eventos del mouse. -
use-force-update
React hook para forzar la re-renderización de un componente funcional. -
use-hotkeys
HotKeys.js React Hook que escuchan los eventos de teclado hacia abajo y hacia arriba, definiendo y distribuyendo atajos de teclado. -
use-hovering
Gancho de React simple y accesible para rastrear el estado de desplazamiento. -
use-http
? useFetch, React hook para realizar solicitudes http isomorfas. -
use-immer
Un gancho para usar immer para manipular el estado. -
use-input-file
Reaccionar gancho para crear archivo de entrada. -
use-is-mounted-ref
useIsMountedRef
es un React Hook para comprobar cuando el componente está montado. -
use-lang-direction
Un gancho que lee eldir
valor del atributo del elemento HTML y cualquier actualización de ese valor que le permite actualizar su interfaz de usuario en consecuencia. -
use-last-fm
Un gancho para mostrar la canción que se está reproduciendo actualmente desde Spotify o cualquier otro sitio compatible con last.fm en tiempo real. ♪ -
use-lilius
Un gancho de calendario sin cabeza para React. -
use-media
Consultas de medios CSS con React hook. -
use-mouse-action
React Hooks para escuchar tanto el mouse hacia arriba como hacia abajo y hacer clic en eventos con una función llamada una vez. -
use-multiselect
Gestionar el estado de selección múltiple. -
use-overflow
Un React Hook que te permite detectar el desbordamiento de X e Y -
use-places-autocomplete
? React hook para Autocompletar de Google Maps Places. -
use-popper
Reaccionar el contenedor de gancho alrededor de Popper.js. -
use-query-params
Un React Hook para administrar el estado en los parámetros de consulta de URL con una fácil serialización. -
use-react-modal
? useModal, React hook para Modals / Dialogs / Lightboxes -
use-react-router
React Hook para el comportamiento pub-sub usando React Router. -
use-reactive-state
useReactiveState()
– una alternativa reactiva a ReactuseState()
. -
use-reducer-async
Reaccionar useReducer con acciones asíncronas -
use-redux
Un gancho para atar redux . -
use-scroller
React hook que agrega automáticamente la página siguiente, ahorrando a los usuarios una carga de página completa. -
use-scroll-to-bottom
React hook para detectar cuándo un elemento se desplazó hacia abajo. -
use-simple-undo
Implementación simple de la funcionalidad deshacer / rehacer. -
server-push-hooks
?React hooks para socket.io , VER y más por venir -
use-socket.io-client
Reaccionar hook para socket.io-client, manipular el cliente socket.io sin ningún efecto secundario. -
use-sse
✨useSSE: use el efecto del lado del servidor.useEffect
tanto del lado del cliente como del servidor. -
use-ssr
☯️ Reaccionar hook para determinar si está en el servidor, navegador o reacciona nativo. -
use-state-snapshots
Un gancho de React para realizar un seguimiento de los cambios de estado para la funcionalidad de deshacer / rehacer. -
use-substate
React hook para suscribirse al estado de su aplicación única (funciona con su aplicación Redux actual ). -
use-suspender
Ejecute acciones asincrónicas conReact.Suspense
-
use-t
Multi-idioma usando ganchos. -
use-undo
React hook para implementar la funcionalidad Deshacer y Rehacer. -
use-videocard
React hook para obtener la información de la tarjeta gráfica del cliente usando canvas -
use-window-blur-change-title
React Hook para establecer el título de la página cuando el usuario está cambiando el enfoque de la ventana actual. -
useDarkMode
Un React Hook personalizado para ayudarte a implementar un componente de “modo oscuro”. -
useDeferredState
Un gancho de React para aplazar el cambio de estado. Eso es esencial cuando su interfaz de usuario necesita esperar a que se complete la animación que desaparece para desmontar el componente. -
useDropZone
React hook que le permite configurar una funcionalidad simple de arrastrar y soltar. -
useEmailAutocomplete
? React hook para entradas de autocompletado de correo electrónico. -
useFileDialog
Abrir diálogo de archivo sin tener problemas con la entrada del archivo usando useFileDialog react hook -
useIsTyping
Hook para ver si el usuario está escribiendo dentro de un área de texto o entrada -
useKeyCapture
⌨️ Un gancho simple para facilitar el evento de escucha keyDown. -
usePosition
Reaccionar gancho para obtener la posición superior izquierda de un elemento. -
useReducerWithEffects
React Hook que coloca reductor y efectos secundarios -
useReducerWithLocalStorage
React hook que agrega soporte de almacenamiento local aluseReducer
hook -
useScreenType
Determinación del tipo de tamaño de pantalla para la cuadrícula Bootstrap 4. -
useScreenType
React hook para obtener dinámicamente el tipo de pantalla actual (móvil, tableta, escritorio) con soporte de punto de interrupción configurable. -
useScrollSpy
Reaccionar gancho para actualizar automáticamente la navegación en función de la posición de desplazamiento. -
useServiceWorker
Un gancho de React que puede registrar un trabajador de servicio -
useValueAfter
Gancho de React muy simple para proporcionar fácilmente diferentes accesorios a un componente (es útil para probar casos extremos) -
useWaitForElements
Un simple gancho para esperar a que los elementos se rendericen con MutationObserver. -
useWindowOrientation
Un gancho que devuelve la orientación de la ventana (vertical o horizontal) en función de las dimensiones actuales de la ventana. -
useWindowWidthBreakpoints
Un gancho para usar puntos de interrupción de ancho de ventana (inspirados en Bootstrap)