react-essential-tools
TypeScript icon, indicating that this package has built-in type declarations

0.39.0 • Public • Published

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.

Package Sidebar

Install

npm i react-essential-tools

Weekly Downloads

0

Version

0.39.0

License

MIT

Unpacked Size

1.05 MB

Total Files

111

Last publish

Collaborators

  • devianllert