react essential tools

React-Wesential-Tools

Sammlung wesentlicher React -Hooks und Komponenten

Beispiele für Live -Storybook -Nutzung

Merkmale

• Einfach zu lernen und zu benutzen.
• Enthält eine Fülle nützlicher Komponenten.
• Enthält eine Fülle fortschrittlicher Haken, die aus der App verfeinert sind.
• Enthält eine Fülle von grundlegenden Haken.
• Geschrieben in TypeScript.

Installation

 npm i react-essential-tools

Verwendung

Sie müssen 16.8.0 oder später reagieren lassen, um die Hooks -API zu verwenden. Sie können jeden Haken oder jede Komponente mit dem mit dem ES6 bezeichneten Importe (Baumschütteln empfohlen) importieren.

 import { Tooltip , useAsync } from 'react-essential-tools' ;

Komponenten

Quelle	Vorschau	Kurzbeschreibung
CircularProgress	Demo	Fortschrittsindikatoren, die allgemein als Spinner bezeichnet werden, drücken eine nicht spezifizierte Wartezeit aus oder zeigen die Länge eines Prozesses an.
Modal	Demo	Bietet eine solide Grundlage für das Erstellen von Dialogen, Popovers, Leuchtkästen oder was auch immer.
Backdrop	Demo	Eine gedimmte Schicht über Ihre Anwendung.
Skeleton	Demo	Platzhalter zum Laden
NoSsr		Deaktivieren Sie SSR für Inhalt
Tooltip	Demo	Kleines Popup mit Informationen
Popper	Demo	Zeigt Inhalte auf einem anderen an
Collapse	Demo	Animationen erweitern/kollaps von Inhalten
Slide	Demo	Animate Slide-In/Slide-out von Inhalten
Zoom	Demo	Animiert Zoom-In/Zoom-Out von Inhalten
Fade	Demo	Animate Fade-in/Ausblenden von Inhalten
Grow	Demo	Animate Scale-in/Scale-out von Inhalten
Portal	Demo	Inhalte in jedem Ziel-Dom-Knoten rendern

Haken

Quelle	Vorschau	Kurzbeschreibung
useDebouncedCallback	Demo	Holen Sie sich einen Rückruf
useLongPress	Demo	Feuert einen Rückruf nach langem Druck
useHover	Demo	Tracks schweben das Element
useHistory	Demo	Staat mit rückgängigem/redo/reset
useMedia	Demo	CSS Media Query Status
useMotion	Demo	Gerätebeschleunigungssensorzustand
useClipboard	Demo	Lesen und schreiben Sie in die Zwischenablage des Benutzers
useMouse	Demo	Mausspositionszustand
useIntersection	Demo	Schnittpunkt der Elemente Sehensfensterstatus
useClickAway	Demo	Feuert einen Rückruf auf Außenklick ab
useNetwork	Demo	Netzwerkinformationszustand
useWindowScroll	Demo	Fenster -Scroll -Positionszustand
useKey	Demo	Feuert einen Rückruf nach der Konfiguration der Tastatur Tastenanwendungen ab
useEvent	Demo	Fügen Sie Hörer und automatisch zu Unmott hinzu
useTimeoutFn	Demo	Feuert einen Rückruf mit Verzögerung ab
useInterval	Demo	Feuert einen Rückruf mit kontrolliertem Intervall ab
usePrevious	Demo	Vorheriger Zustandswert
useUpdateEffect	Demo	useEffect mit dem ersten Aufruf überspringen
useMount	Demo	Feuert einen Rückruf auf dem Mount ab
useUnmount	Demo	Feuert einen Rückruf auf Unmunty ab
useLocalStorage		Synchronisationsstaat nach localstorage
useAsync	Demo	Async/Versprechen wurde sofort in den Staat beschlossen
useAsyncFn	Demo	Async/Versprechen durch Rückruf zum Status gelöst
useBoolean	Demo	Status mit booleschen Wert und Rückruf umschalten
useSetState	Demo	Zustand mit ähnlichen Klassenkomponenten setState -Verschmelzverhalten
useFirstMountState	Demo	Kehren Sie true für das Render der First -Komponente zurück
useMountedState	Demo	Rückruf zurückgeben, um zu überprüfen, ob die Komponente montiert ist
useIsomorphicLayoutEffect		useLayoutEffect , der beim Server-Side-Rendering keine Warnung zeigt

Lizenz

Dieses Projekt ist nach der MIT -Lizenz, Copyright (C) 2019 Ruslan Povolockii, lizenziert. Weitere Informationen finden Sie LICENSE.md .