react haiku

Reaccionar haiku

¡Una colección limpia y ligera de ganchos y utilidades react!

---

Campo de golf

• Documentos oficiales

¿Qué es esto?

Haiku es una biblioteca React simple y ligera con el objetivo de guardar
tu tiempo ofreciendo una gran colección de ganchos y utilidades que
¡Ayúdate a hacer el trabajo más rápido y de manera más eficiente!

Instalar

¡Instalar Haiku es muy fácil!
Requiere reaccionar> = 16.8.0

Npm

npm install react-haiku

Hilo

yarn add react-haiku

PNPM

pnpm install react-haiku

Prueba unitaria con broma y biblioteca de pruebas reaccionadas

Este proyecto utiliza la broma como el marco de prueba y reacciona la biblioteca de pruebas (RTL) para probar componentes y ganchos react.

Pruebas de ejecución

Para ejecutar todas las pruebas unitarias con cobertura habilitada

npm run test 

Ejemplos de uso

Consulte la documentación oficial para ver los ejemplos de uso completo.

Usando ganchos

 import { useHover } from 'react-haiku' ;

const Component = ( ) => {
  const { hovered , ref } = useHover ( ) ;

  return < p ref = { ref } > { hovered ? 'All mice on me' : 'No mice on me' } </ p > ;
} ;

export default Component ;

Uso de utilidades

 import { For } from 'react-haiku' ;

const Component = ( ) => {
  const list = [ { name : 'React' } , { name : 'Haiku' } ] ;

  render (
    < >
      < For each = { list } render = { ( item , index ) => < p > { item . name } </ p > } />
    </ > ,
  ) ;
} ;

export default Component ; 

Que contribuye

Haiku siempre está abierto a mejoras y contribuciones, puede verificar los problemas abiertos si desea contribuir, y también es posible solicitar agregar sus propias mejoras/ideas utilizando la plantilla de solicitud de función. Antes de contribuir, lea la guía de contribución y asegúrese de respetar los estándares. ¡Gracias por tu tiempo!

Contenido de paquete

Manos

• useClipboard() - ¡Copie datos en el portapapeles del usuario!
• useHover() : ¡forma rápida de detectar si su mouse está sobre un elemento!
• useInputValue() - ¡Administre el estado de entrada con este simple gancho!
• useLeaveDetection() - ¡Detecta cuándo el cursor de su usuario sale de la página!
• useMediaQuery() - Manipule su componente utilizando consultas de medios!
• useMousePosition() - ¡Detectar la posición actual del mouse en relación con un objetivo o todo el documento!
• usePrefersTheme() - ¡Detectar el tema del sistema preferido del usuario!
• useScript() - ¡Adjunte etiquetas de script al documento desde sus componentes!
• useToggle() - ¡Alternar los valores de estado entre dos opciones diferentes!
• useBoolToggle() - ¡Alternar los valores de estado booleano!
• useUrgentUpdate() - ¡FUERZA RENDIR UN COMPONENTE al llamar a este gancho!
• useClickOutside() - ¡Detectar clics fuera de un elemento objetivo!
• useConfirmExit() : solicite al usuario un mensaje antes de cerrar la pestaña si el estado está configurado como sucio.
• useDebounce() - ¡Los cambios en el estado de desbloqueo para reaccionar a las actualizaciones después de un retraso!
• useEventListener() - ¡Establezca oyentes de eventos en el objeto de la ventana o en un elemento de destino específico!
• useFavicon() - ¡Actualice dinámicamente el Favicon del sitio web desde un componente!
• useFirstRender() : ¡verifique si un componente está o no en su primer render!
• useHold() : ¡maneje largas presiones en un elemento de destino y ejecute un controlador después de un retraso establecido!
• useIdle() : ¡detecte la actividad/inactividad del usuario en la página basada en eventos!
• useIsomorphicLayoutEffect() - ¡Cambie entre UseeFectect y UselayOutEffect dependiendo del entorno de ejecución (SSR vs navegador)!
• useLocalStorage() - Administrar los valores de LocalStorage dinámicamente
• useScrollPosition() : acceda a la posición de desplazamiento actual en la página y modifíquela programáticamente.
• useSingleEffect() - Ejecute el gancho UseeFectect Strictly solo una vez cuando el componente esté montado!
• useTitle() - ¡Actualice el título del documento de sus componentes!
• useUpdateEffect() , similar a UseeFectect, pero omite el primer render de un componente, y solo reacciona a las actualizaciones activadas por los valores de dependencia.

Utilidades

• If - ¡Componente para una representación condicional simple!
• Show - ¡Componente para la representación condicional compleja!
• For - Componente de representación dinámica con asignación de clave automática!
• RenderAfter : componente que hace a sus hijos después de un retraso establecido.
• Image : componente que simplifica el proceso de representación de imágenes.

Mantenedores

David Haz

Licencia

MIT