react haiku
v2.1.8
Haiku est une bibliothèque de réact simple et légère dans le but d'épargner
vous temps en offrant une grande collection de crochets et d'utilitaires qui
vous aider à faire le travail plus rapidement et plus efficacement!
L'installation de Haiku est très facile!
Nécessite React> = 16.8.0
npm install react-haikuyarn add react-haikupnpm install react-haikuCe projet utilise la plaisanterie comme la bibliothèque de tests de test et de test (RTL) pour tester les composants et les crochets React.
Pour exécuter tous les tests unitaires avec une couverture activée
npm run test Veuillez consulter la documentation officielle pour les exemples d'utilisation complets.
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 ; 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 ; Haiku est toujours ouvert aux améliorations et aux contributions, vous pouvez vérifier les problèmes ouverts si vous souhaitez contribuer, et il est également possible de demander à ajouter vos propres améliorations / idées en utilisant le modèle de demande de fonctionnalité. Avant de contribuer, veuillez lire le guide de contribution et assurez-vous de respecter les normes! Merci pour votre temps!
useClipboard() - Copiez les données dans le presse-papiers de l'utilisateur!useHover() - moyen rapide de détecter si votre souris est sur un élément!useInputValue() - Gérer l'état d'entrée avec ce crochet simple!useLeaveDetection() - détecter quand le curseur de votre utilisateur quitte la page!useMediaQuery() - Manipulez votre composant à l'aide de requêtes multimédias!useMousePosition() - détecter la position actuelle de la souris par rapport à une cible ou à l'ensemble du document!usePrefersTheme() - détecter le thème système préféré de l'utilisateur!useScript() - Joignez des balises de script au document à partir de vos composants!useToggle() - Toguez les valeurs de l'état entre deux options différentes!useBoolToggle() - Toggle Boolean State Valeurs!useUrgentUpdate() - Force Render un composant lors de l'appel de ce crochet!useClickOutside() - détecter des clics en dehors d'un élément cible!useConfirmExit() - Invitez l'utilisateur avec un message avant de fermer l'onglet si l'état est défini comme sale.useDebounce() - Déboucher les changements de l'état pour réagir aux mises à jour après un retard!useEventListener() - Définissez les écouteurs d'événements sur l'objet Window ou un élément cible spécifique!useFavicon() - Mettez à jour dynamiquement le favicon du site Web à partir d'un composant!useFirstRender() - Vérifiez si un composant est ou non sur son premier rendu!useHold() - Gire les pressions longues sur un élément cible et exécutez un gestionnaire après un délai défini!useIdle() - détecter l'activité / inactivité utilisateur sur la page en fonction des événements!useIsomorphicLayoutEffect() - basculer entre useEffecte et useLayOutEffect en fonction de l'environnement d'exécution (navigateur SSR vs)!useLocalStorage() - Gérer les valeurs locales de dynamiquementuseScrollPosition() - Accédez à la position de défilement actuelle sur la page et modifiez-la programmatiquement.useSingleEffect() - Exécutez strictement le crochet UseEffect uniquement une fois lorsque le composant est monté!useTitle() - Mettez à jour le titre du document de vos composants!useUpdateEffect() - Similaire à UseEffect, mais il saute le premier rendu d'un composant, et ne réagit qu'aux mises à jour déclenchées par des valeurs de dépendance.If - Composant pour un rendu conditionnel simple!Show - Composant pour le rendu conditionnel complexe!For - composant de rendu dynamique avec affectation de clé automatique!RenderAfter - Composant qui rend ses enfants après un délai défini.Image - Composant qui simplifie le processus de rendu des images. David Haz
Mit
