React-essential-tools NPM

react-essential-tools

Collection of essential React Hooks and Components

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