react-essential-tools

Collection of essential React Hooks and Components

Live storybook usage examples

Features

• Easy to learn and use.
• Contains a wealth of useful Components.
• Contains a wealth of advanced Hooks that are refined from the app.
• Contains a wealth of basic Hooks.
• Written in TypeScript.

Installation

npm i react-essential-tools

Usage

You need to have React 16.8.0 or later installed to use the Hooks API. You can import each hook or component using ES6 named imports (tree shaking recommended).

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

Components

Source	Preview	Short description
CircularProgress	Demo	Progress indicators commonly known as spinners, express an unspecified wait time or display the length of a process.
Modal	Demo	Provides a solid foundation for creating dialogs, popovers, lightboxes, or whatever else.
Backdrop	Demo	A dimmed layer over your application.
Skeleton	Demo	Placeholder for loading
NoSsr		Disable SSR for content
Tooltip	Demo	Small popup with info
Popper	Demo	Displays content on top of another
Collapse	Demo	Animates expand/collapse of content
Slide	Demo	Animates slide-in/slide-out of content
Zoom	Demo	Animates zoom-in/zoom-out of content
Fade	Demo	Animates fade-in/fade-out of content
Grow	Demo	Animates scale-in/scale-out of content
Portal	Demo	Render content inside any target DOM-node

Hooks

Source	Preview	Short description
useDebouncedCallback	Demo	Get debounced callback
useLongPress	Demo	Fires a callback after long pressing
useHover	Demo	Tracks hovering of the element
useHistory	Demo	State with undo/redo/reset
useMedia	Demo	CSS media query state
useMotion	Demo	Device acceleration sensor state
useClipboard	Demo	Read and write to the user's clipboard
useMouse	Demo	Mouse position state
useIntersection	Demo	Intersection of elements\viewport state
useClickAway	Demo	Fires a callback on outside click
useNetwork	Demo	Network information state
useWindowScroll	Demo	Window scroll position state
useKey	Demo	Fires a callback after configured keyboard keys usage
useEvent	Demo	Add listeners and auto-clean on unmount
useTimeoutFn	Demo	Fires callback with delay
useInterval	Demo	Fires callback with controlled interval
usePrevious	Demo	Previous state value
useUpdateEffect	Demo	useEffect with first invocation skip
useMount	Demo	Fires callback on mount
useUnmount	Demo	Fires callback on unmount
useLocalStorage		Sync state to localstorage
useAsync	Demo	Async/Promise resolved instantly to state
useAsyncFn	Demo	Async/Promise resolved by callback to state
useBoolean	Demo	State with boolean value and toggle callback
useSetState	Demo	State with similar to class components setState merging behavior
useFirstMountState	Demo	Return true on first component's render
useMountedState	Demo	Return callback to check if component is mounted
useIsomorphicLayoutEffect		useLayoutEffect that does not show warning when server-side rendering

License

This project is licensed under the MIT license, Copyright (c) 2019 Ruslan Povolockii. For more information see LICENSE.md.