Nth Permutation Mathematics
    Have ideas to improve npm?Join in the discussion! »

    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.

    Install

    npm i react-essential-tools

    DownloadsWeekly Downloads

    20

    Version

    0.39.0

    License

    MIT

    Unpacked Size

    1.05 MB

    Total Files

    111

    Last publish

    Collaborators

    • avatar