@manzano/use-is-active
TypeScript icon, indicating that this package has built-in type declarations

1.1.1 • Public • Published

@manzano/use-is-active

Tiny hook for an optimal UX loading indication.

GitHub Workflow Status npm version

No flickering UI anymore!

  • If your loading state lasts less than 800ms (by default), no loading indicator at all will be displayed to the user
  • Otherwise, if it exceeds this threshold, your loading indicator will start and last at least 1000ms (by default) even if your actual loading state ends before.

Installation

# NPM
npm install @manzano/use-is-active

# YARN
yarn add @manzano/use-is-active

@manzano/use-is-active 1.x.x requires React 16.8.3 or later.

Usage

import { useIsActive } from '@manzano/use-is-active';

export function LoadingIndicator({ isLoading }: { isLoading: boolean }) {
  const isActive = useIsActive(isLoading);

  return isActive ? <div>Loading...</div> : null;
}

The hook takes your actual loading boolean variable as param and returns the UX optimized one.

Options override

By default, the delay before activation is 800ms and the minimal duration is 1000ms. You can override these values by context provider.

Example:

import { ActivityOptionsProvider } from '@manzano/use-is-active';

root.render(
  <ActivityOptionsProvider delayBeforeActivation={300} minActiveDuration={1500}>
    <App />
  </ActivityOptionsProvider>,
);

Readme

Keywords

Package Sidebar

Install

npm i @manzano/use-is-active

Weekly Downloads

0

Version

1.1.1

License

ISC

Unpacked Size

7.26 kB

Total Files

6

Last publish

Collaborators

  • manzano