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-hookshooks.macroMacros de Babel para la invalidación automática de memorias- Kit de inicio CodeSandbox
- React Hooks Snippets para VS Code
hook-into-propsAyudante para construir HOC usando ganchos. Útil para usar ganchos con componentes de clase.react-universal-hooksReact 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-libraryBiblioteca 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-hooksUn conjunto de React Hooks para engancharse .@d2k/react-devtoReact hook para solicitudes de API de Dev.to@d2k/react-githubReaccionar gancho para solicitudes de API de Github@d2k/react-localstorageReact hook que se encarga de actualizar y borrar los valores de almacenamiento local mientras los mantiene sincronizados con sus componentes.@elgorditosalsero/react-gtm-hookReact hook para manejar fácilmente el Google Tag Manager.@hookstate/coreGestió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/formalPrimitivas 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-hookFunciones de instancia dentro de FunctionComponent comoclass-propertiese igual enShallowCompare@rehooks/component-sizeReact hook para determinar el tamaño de un componente.@rehooks/document-titleReaccionar gancho para actualizar el título del documento.@rehooks/document-visibilityReact hook para suscribirse a la visibilidad del documento.@rehooks/input-valueReaccionar gancho para crear valores de entrada.@rehooks/local-storageReact hook que se sincronizalocalStorage[key]con la comp.@rehooks/network-statusReaccionar gancho para obtener el estado de la red.@rehooks/online-statusReact Hook para estado en línea.@rehooks/window-scroll-positionReaccionar gancho para obtener ventanaxyyposición.@rehooks/window-sizeReaccionar gancho para suscribirse al tamaño de la ventana.@rekindle/use-request? Reaccionar gancho para hacer una solicitud.@staltz/use-profunctor-stateReact 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-potBiblioteca de la utilidad React hook.ahooks/usetableUna solución progresiva para la escena de la tabla de consultas.concentUna gestión estatal que se adapta para reaccionar, es simple, predecible, progresiva y eficiente.constateTransforme su estado local en estado global usandouseContextStateyuseContextReducer.conuseCompartir gancho con contextoeasy-peasyEstado global fácil de usar para React.fetch-suspenseReact hook para Fetch API con soporte para Suspense.graphql-hooksCliente GraphQL de enganches mínimos primero.mobx-react-liteEnlaces de React ligeros para MobX basados en ganchos de React experimentales.modaliUn delicioso componente de diálogo modal para React, creado desde cero para admitir React Hooks.moment-hooksUna biblioteca que contiene ganchos de reacción genéricosnice-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-hookReact hook para simplificar la búsqueda de datos basada en Promise.reactive-react-reduxEnlace de React Redux con React Hooks y Proxyreact-async-hookReact hook para obtener datos ad-hoc en sus componentes React.react-cached-callbackReact hooks para almacenar en caché muchas devoluciones de llamada por clave, por ejemplo, en bucles.react-context-refsReaccionar ganchos para obtener referencias de elementos a través del contexto.react-cookieReaccionar 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-hookGancho 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-formReact biblioteca de formularios declarativos basada en hook.react-deep-hooksReaccionar ganchos para dependencias no primitivas.react-dom-status-hookReact hook por suscribirse alDOMContentLoadedevento.react-enhanced-reducer-hookUna alternativa auseReducereso acepta middlewares.react-fetch-hookReact hook para usar cómodamente la API de Fetch.react-firebase-hooksUna colección de ganchos para usar con Firebase .react-form-statefulBiblioteca de formularios. Expone el envío para permitir que la biblioteca se extienda a través de efectos secundarios.react-hangerUna pequeña colección de ganchos utilitarios.react-hook-mighty-mouseReact hook que rastrea los eventos del mouse en el elemento seleccionado ?react-hook-mousetrapUn gancho para activar devoluciones de llamada en teclas o combinaciones de teclas, alimentado por ratonera.react-hookedupUna colección de útiles ganchos de React.react-hook-formValidación de formularios sin complicaciones.react-hook-layoutGestión de diseño en React.react-hooks-asyncReaccionar hooks personalizados para funciones asincrónicas con abortabilidad y componibilidadreact-hooks-global-stateUna simple gestión del estado global.react-hooks-image-sizeEnganche para obtener el tamaño de imagen natural de la URL.react-hooks-libUn conjunto de ganchos react reutilizables.react-hooks-svgdrawingA ganchos para dibujar svg.react-hooks-use-modalUn gancho para abrir el modal fácilmente.react-hooks-visibleUn gancho para la visibilidad de los elementos. Utiliza la API de observador de intersecciones.react-hooks-workerReaccionar ganchos personalizados para trabajadores webreact-hotkey-hookReaccionar gancho para teclas de acceso rápido.react-i18nextInternacionalización para reaccionar bien.react-immer-hooksuseState y useReducer usando Immer para actualizar el estado.react-indicative-hooksHooks que envuelven una biblioteca de validación de datos llamada Indicativereact-intersection-visible-hookReact hook para rastrear la visibilidad de un componente funcional.react-media-hookReaccionar gancho para consultas de medios.react-metatags-hookReact Hook para administrar etiquetas meta html.react-native-react-bridgeUn 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 Reactreact-page-nameReact Hook para administrar el título de la página.react-peer-dataContenedor de reacción para la biblioteca PeerData para archivos, transmisión / intercambio de medios mediante WebRTC.react-pirateReaccionar el ciclo de vida y los ganchos de utilidades.react-powerhooksApi de Hooks para componentes react-powerplug.react-promisefulUn componente React y un gancho para representar a los niños condicionalmente en función de un estado de promesa.react-queryGanchos para buscar, almacenar en caché y actualizar datos asincrónicos en React.react-recaptcha-hookReact hook para google-recaptcha v3react-recipes?? Colección de recetas esenciales de gancho ?react-request-hookSolicitudes de API gestionadas, cancelables y seguras.react-responsiveReaccionar el módulo de consulta de medios.react-rocketjumpManeje el estado y los efectos secundarios como una brisa.react-screen-wake-lockImplementació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ándosereact-script-hookReaccionar gancho para cargar dinámicamente un script externo y saber cuándo está cargadoreact-selector-hooksColección de fábricas de selectores memorizados basados en ganchos para declaraciones fuera del render.react-speech-kitGanchos para el reconocimiento de voz y la síntesis de voz del navegador.react-state-patternsPaquete de utilidades para crear implementaciones reutilizables de patrones de proveedores de estado de React a partir de hooks.react-swipeableReaccionar el gancho del controlador de eventos de deslizamiento.react-trackedEstado 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-apiDatos 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-browserUn 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-calendarUn gancho para implementar un calendario con eventos.react-use-clipboardUn gancho que copia texto al portapapeles de un usuario.react-use-d3Un gancho de React para usar D3.react-use-data-loaderReaccionar gancho para cargar datosreact-use-fetch-factoryReact hook que se encarga de buscar y seleccionar datos con redux.react-use-fetch-with-reduxReact hook que almacena en caché las solicitudes de API que funcionan con redux.react-use-form-stateReact hook para administrar el formulario y el estado de las entradas.react-use-id-hookReact hook para generar cadenas de identificación únicas seguras para SSR.react-use-idbReaccionar gancho para almacenar valor en el navegador usandoindexDB.react-use-infinite-loader♾️ ⏳ Gancho superligero de carga infinita (desplazamiento) para aplicaciones Reactreact-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 facilidadreact-use-message-barUn simple gancho de React para barras de mensajes.react-use-modalReact hook para administrar modal.react-use-pathEl enrutador de reacción de estilo de gancho más pequeño.react-use-scroll-positionReaccionar gancho para usar la posición de desplazamiento.react-use-triggerReaccionar gancho para el efecto de disparo desde cualquier lugar del códigoreact-use-watchUn gancho de React sobre disparadores solo se activa una vez cuando las dependencias han cambiado.react-use-waveletReact hooks para conectarse a la plataforma de contrato inteligente Waveletreact-useColección de ganchos imprescindibles.react-useFormlessReaccionar gancho para manejar el estado de los formularios.react-usemiddlewareReact hook para usar middlewares de Redux existentes (como thunk o saga) conuseReducer.react-useportal? usePortal, React hook para portalesreact-user-mediaReact wrapper paranavigator.getUserMedia.react-waitGancho de administración de cargador complejo para aplicaciones React.react-window-communication-hookReact hook para comunicarse entre los contextos del navegador (pestañas, ventanas, iframes).react-with-hooksPonyfill para la API de React Hooks propuesta.reaktionuseState como un gancho para la gestión global del estado.redhooksGestió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-hookReact hook para acceder al estado mapeado desde una tienda Redux.region-coreUn marco de gestión del estado global con un ganchouseProps.rehooks-visibility-sensorComprueba si un elemento se ha desplazado a la vista o no.resyncedGestión de múltiples estados usando React Hooks API.retoTienda React flexible y eficiente con ganchos.rrhGanchos de reacción súper simples para react-redux.rxjs-hooksUna forma fácil de usar RxJS v6 + con react hooks.scroll-data-hookDevuelve información sobre la velocidad de desplazamiento, la distancia, la dirección y más.style-hook? wirte css en js con react hooks.swrBiblioteca React Hooks para la obtención remota de datos.the-platformLas 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ónuse-abortable-fetchReaccionar gancho que busca y aborta cuando los componentes se descargan o se realiza una solicitud diferente.use-actionCasi lo mismo para useEffect, pero no diferido.use-as-bindReact hook para usar as-bind con una fuente WASM.use-async-memoReact hook para generar datos memorizados asincrónicos.use-autocompleteUn gancho de React para devolver valores de autocompletar para una cadena de búsqueda dentro de una matriz.use-axios-reactReact CRUD hooks para axios, lista completa de ejemplosuse-booleanAyudantes convenientes para manejar el estado booleano.use-browser-historyUn gancho de React para manejar los eventos del historial del navegador.use-cartUn gancho de React que le brinda la funcionalidad de carrito de compras.use-click-awayReaccione el gancho cuando desee que se invoque una devolución de llamada cuando no se hizo clic en un elemento DOM.use-clippyUn gancho de React para leer y escribir en el portapapeles del usuario.use-context-selectorReaccionar el gancho useContextSelector en el área de usuario.use-controlled-input-numberReaccione el gancho para convertir el comportamiento de entrada numérica en más o menos lo que espera.use-countriesGancho de reacción personalizado para listar países e idiomas.use-debounceUn gancho antirrebote para React.use-deep-compareSon 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-printReaccionar gancho para detectar cuándo se está imprimiendo una página.use-dimensionsReact Native hook para obtener las dimensiones de la pantalla y la ventana.use-double-clickReact hook para clics dobles continuos y combinación de eventos de clic y doble clicuse-eazy-authReaccionar ganchos para manejar cosas de autenticación.use-eventsUn conjunto de React Hooks para manejar eventos del mouse.use-force-updateReact hook para forzar la re-renderización de un componente funcional.use-hotkeysHotKeys.js React Hook que escuchan los eventos de teclado hacia abajo y hacia arriba, definiendo y distribuyendo atajos de teclado.use-hoveringGancho de React simple y accesible para rastrear el estado de desplazamiento.use-http? useFetch, React hook para realizar solicitudes http isomorfas.use-immerUn gancho para usar immer para manipular el estado.use-input-fileReaccionar gancho para crear archivo de entrada.use-is-mounted-refuseIsMountedRefes un React Hook para comprobar cuando el componente está montado.use-lang-directionUn gancho que lee eldirvalor del atributo del elemento HTML y cualquier actualización de ese valor que le permite actualizar su interfaz de usuario en consecuencia.use-last-fmUn 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-liliusUn gancho de calendario sin cabeza para React.use-mediaConsultas de medios CSS con React hook.use-mouse-actionReact Hooks para escuchar tanto el mouse hacia arriba como hacia abajo y hacer clic en eventos con una función llamada una vez.use-multiselectGestionar el estado de selección múltiple.use-overflowUn React Hook que te permite detectar el desbordamiento de X e Yuse-places-autocomplete? React hook para Autocompletar de Google Maps Places.use-popperReaccionar el contenedor de gancho alrededor de Popper.js.use-query-paramsUn 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 / Lightboxesuse-react-routerReact Hook para el comportamiento pub-sub usando React Router.use-reactive-stateuseReactiveState()– una alternativa reactiva a ReactuseState().use-reducer-asyncReaccionar useReducer con acciones asíncronasuse-reduxUn gancho para atar redux .use-scrollerReact hook que agrega automáticamente la página siguiente, ahorrando a los usuarios una carga de página completa.use-scroll-to-bottomReact hook para detectar cuándo un elemento se desplazó hacia abajo.use-simple-undoImplementación simple de la funcionalidad deshacer / rehacer.server-push-hooks?React hooks para socket.io , VER y más por veniruse-socket.io-clientReaccionar 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.useEffecttanto del lado del cliente como del servidor.use-ssr☯️ Reaccionar hook para determinar si está en el servidor, navegador o reacciona nativo.use-state-snapshotsUn gancho de React para realizar un seguimiento de los cambios de estado para la funcionalidad de deshacer / rehacer.use-substateReact hook para suscribirse al estado de su aplicación única (funciona con su aplicación Redux actual ).use-suspenderEjecute acciones asincrónicas conReact.Suspenseuse-tMulti-idioma usando ganchos.use-undoReact hook para implementar la funcionalidad Deshacer y Rehacer.use-videocardReact hook para obtener la información de la tarjeta gráfica del cliente usando canvasuse-window-blur-change-titleReact Hook para establecer el título de la página cuando el usuario está cambiando el enfoque de la ventana actual.useDarkModeUn React Hook personalizado para ayudarte a implementar un componente de “modo oscuro”.useDeferredStateUn 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.useDropZoneReact hook que le permite configurar una funcionalidad simple de arrastrar y soltar.useEmailAutocomplete? React hook para entradas de autocompletado de correo electrónico.useFileDialogAbrir diálogo de archivo sin tener problemas con la entrada del archivo usando useFileDialog react hookuseIsTypingHook para ver si el usuario está escribiendo dentro de un área de texto o entradauseKeyCapture⌨️ Un gancho simple para facilitar el evento de escucha keyDown.usePositionReaccionar gancho para obtener la posición superior izquierda de un elemento.useReducerWithEffectsReact Hook que coloca reductor y efectos secundariosuseReducerWithLocalStorageReact hook que agrega soporte de almacenamiento local aluseReducerhookuseScreenTypeDeterminación del tipo de tamaño de pantalla para la cuadrícula Bootstrap 4.useScreenTypeReact hook para obtener dinámicamente el tipo de pantalla actual (móvil, tableta, escritorio) con soporte de punto de interrupción configurable.useScrollSpyReaccionar gancho para actualizar automáticamente la navegación en función de la posición de desplazamiento.useServiceWorkerUn gancho de React que puede registrar un trabajador de serviciouseValueAfterGancho de React muy simple para proporcionar fácilmente diferentes accesorios a un componente (es útil para probar casos extremos)useWaitForElementsUn simple gancho para esperar a que los elementos se rendericen con MutationObserver.useWindowOrientationUn gancho que devuelve la orientación de la ventana (vertical o horizontal) en función de las dimensiones actuales de la ventana.useWindowWidthBreakpointsUn gancho para usar puntos de interrupción de ancho de ventana (inspirados en Bootstrap)
