Colección de Recursos para React Hooks #2

Documentación oficial ? Documentos de React Hooks

Discusiones

• Reaccionar Hooks RFC

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

• React Hooks – Sintaxis

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-propsAyudante 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-hooksUn 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-hookFunciones de instancia dentro de FunctionComponent como class-propertiese 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-storageReact hook que se sincroniza localStorage[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-positionReaccionar gancho para obtener ventana xy yposició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.
• constateTransforme su estado local en estado global usando useContextStatey useContextReducer.
• 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-hookGancho de cuenta regresiva simple pero poderoso para React. Desarrollado por requestAnimationFrame.
• 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-hookReact hook por suscribirse al DOMContentLoadedevento.
• react-enhanced-reducer-hookUna alternativa a useReducereso acepta middlewares.
• react-fetch-hook React 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-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-visibleUn 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-hooksHooks 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-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á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-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-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-idbReaccionar gancho para almacenar valor en el navegador usando indexDB.
• 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-usemiddlewareReact hook para usar middlewares de Redux existentes (como thunk o saga) con useReducer.
• react-useportal ? usePortal, React hook para portales
• react-user-mediaReact wrapper para navigator.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.
• 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-hook React hook para acceder al estado mapeado desde una tienda Redux.
• region-coreUn marco de gestión del estado global con un gancho useProps.
• 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-immerUn 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-directionUn gancho que lee el dirvalor 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-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 React useState().
• use-reducer-async Reaccionar useReducer con acciones asíncronas
• use-reduxUn 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-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-snapshots Un 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-suspender Ejecute acciones asincrónicas con React.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”.
• 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.
• 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
• useReducerWithLocalStorageReact hook que agrega soporte de almacenamiento local al useReducerhook
• 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)