react haiku

Reagieren Sie Haiku

Eine saubere und leichte Sammlung von React Hooks & Utilities!

---

Links

• Offizielle Dokumente

Was ist das?

Haiku ist eine einfache und leichte Reaktionsbibliothek mit dem Ziel, zu sparen
Sie haben Zeit, indem Sie eine große Sammlung von Haken und Dienstprogrammen anbieten, die es tun wird
Helfen Sie, die Arbeit schneller und effizienter zu erledigen!

Installieren

Die Installation von Haiku ist sehr einfach!
Benötigt React> = 16.8.0

NPM

npm install react-haiku

Garn

yarn add react-haiku

Pnpm

pnpm install react-haiku

Unit -Tests mit Scherz- und React -Testbibliothek

Dieses Projekt verwendet Scherz als Test -Framework- und React -Testbibliothek (RTL) zum Testen von React -Komponenten und -haken.

Auslauftests

So führen Sie alle Unit -Tests mit aktivierter Deckung aus

npm run test 

Nutzungsbeispiele

Bitte überprüfen Sie die offizielle Dokumentation, um Beispiele für vollständige Verwendungsmöglichkeiten zu erhalten.

Verwenden von Haken

 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 ;

Dienstprogramme verwenden

 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 ; 

Beitragen

Haiku ist immer offen für Verbesserungen und Beiträge, Sie können die offenen Probleme überprüfen, wenn Sie einen Beitrag leisten möchten. Es ist auch möglich, Ihre eigenen Verbesserungen/Ideen mithilfe der Feature -Anfrage -Vorlage hinzuzufügen. Lesen Sie vor dem Beitrag den Beitragsleitfaden und achten Sie darauf, die Standards zu respektieren! Vielen Dank für Ihre Zeit!

Paketinhalt

Haken

• useClipboard() - Kopieren Sie Daten in die Zwischenablage des Benutzers!
• useHover() - Schneller Weg, um festzustellen, ob Ihre Maus über ein Element ist!
• useInputValue() - Eingabestatus mit diesem einfachen Haken verwalten!
• useLeaveDetection() - Erkennen Sie, wann der Cursor Ihres Benutzers die Seite verlässt!
• useMediaQuery() - Manipulieren Sie Ihre Komponente mit Medienabfragen!
• useMousePosition() - Erkennen Sie die aktuelle Position der Maus relativ zu einem Ziel oder dem gesamten Dokument!
• usePrefersTheme() - Erkennen Sie das bevorzugte Systemthema des Benutzers!
• useScript() - Skript -Tags an das Dokument aus Ihren Komponenten anhängen!
• useToggle() - Umkippungsstatuswerte zwischen zwei verschiedenen Optionen!
• useBoolToggle() - Boolean Statuswerte umschalten!
• useUrgentUpdate() - Erzwingen Sie eine Komponente, wenn Sie diesen Haken nennen!
• useClickOutside() - Klicks außerhalb eines Zielelements erkennen!
• useConfirmExit() - fordern Sie den Benutzer mit einer Nachricht auf, bevor Sie die Registerkarte schließen, wenn der Status als schmutzig festgelegt ist.
• useDebounce() - Debounce -Statusänderungen, um nach einer Verzögerung auf Updates zu reagieren!
• useEventListener() - Event -Listener im Fensterobjekt oder ein bestimmtes Zielelement festlegen!
• useFavicon() - Aktualisieren Sie das Favicon der Website dynamisch von einer Komponente!
• useFirstRender() - Überprüfen Sie, ob sich eine Komponente auf dem ersten Render befindet!
• useHold() - Lange Drücken eines Zielelements verarbeiten und nach einer festgelegten Verzögerung einen Handler ausführen!
• useIdle() - Benutzeraktivität/Inaktivität auf der Seite erkennen, basierend auf Ereignissen!
• useIsomorphicLayoutEffect() - Wechseln Sie zwischen UseEffect und UselayoutEffect in Abhängigkeit von der Ausführungsumgebung (SSR vs Browser)!
• useLocalStorage() - Lokalstorage -Werte dynamisch verwalten
• useScrollPosition() - Zugriff auf die aktuelle Bildlaufposition auf der Seite und ändern Sie sie programmatisch.
• useSingleEffect() - Führen Sie den UseEffect -Hook aus, nur einmal, wenn die Komponente montiert ist!
• useTitle() - Aktualisieren Sie den Titel des Dokuments von Ihren Komponenten!
• useUpdateEffect() - ähnlich wie bei der VerwendungEffect, überspringt jedoch das erste Rendern einer Komponente und reagiert nur auf Updates, die durch Abhängigkeitswerte ausgelöst werden.

Versorgungsunternehmen

• If - Komponente für ein einfaches bedingendes Rendering!
• Show - Komponente für das komplexe bedingte Rendering!
• For - dynamische Rendering -Komponente mit automatischer Schlüsselzuweisung!
• RenderAfter - Komponente, die seine Kinder nach einer festgelegten Verzögerung wiederholen.
• Image - Komponente, die den Prozess des Renderns von Bildern vereinfacht.

Betreuer

David Haz

Lizenz

MIT