@status-ink/react

@status-ink/react

React component and hook for animated status and progress text.

npm install @status-ink/react

import { StatusInk } from '@status-ink/react';
import '@status-ink/react/style.css';

export function LoadingStatus({ status }: { status: string }) {
  return <StatusInk ariaLive="polite" status={status} />;
}

Use autonomous fallback statuses when your application has no real progress updates yet:

import { StatusInk } from '@status-ink/react';

export function FallbackStatus() {
  return <StatusInk holdMs={2000} statuses={['Loading', 'Indexing', 'Ready']} />;
}

Use useStatusInk(...) when you want to own the markup. The hook and component stop their active runner when the owning React tree unmounts.

Reduced motion defaults to auto and follows prefers-reduced-motion. It preserves status changes while disabling effects and shimmer. Pass reducedMotion={true} or false to override it, and shimmer={false} to disable shimmer independently. Status text is quiet to assistive technology by default; opt into ariaLive="polite" or "assertive" only for meaningful announcements.

Open the React example in StackBlitz

Documentation · Live demo · Issues · npm