@mshafiqyajid/react-empty-state
Headless empty state hook and styled component. Five presets, custom icon/image, size and orientation variants, action slots, fully accessible.
Playground #
Start your first project
Create a project to organize your work and collaborate with your team.
No data yet
Start adding items to see them here.
Props
TSX
import { EmptyStateStyled } from "@mshafiqyajid/react-empty-state/styled";
import "@mshafiqyajid/react-empty-state/styles.css";
<EmptyStateStyled />Install #
npm install @mshafiqyajid/react-empty-stateQuick start #
import { EmptyStateStyled } from "@mshafiqyajid/react-empty-state/styled";
import "@mshafiqyajid/react-empty-state/styles.css";
<EmptyStateStyled
preset="no-data"
action={<button>Add item</button>}
/>
// Custom content
<EmptyStateStyled
title="Nothing here yet"
description="Create your first item to get started."
action={<button>Create item</button>}
size="lg"
/>Headless #
import { useEmptyState } from "@mshafiqyajid/react-empty-state";
function MyEmptyState({ title }: { title: string }) {
const { rootProps } = useEmptyState({ title });
return (
<div {...rootProps} className="my-empty-state">
<p>{title}</p>
</div>
);
}Presets #
| Preset | Title | Description |
|---|---|---|
no-data | No data yet | Start adding items to see them here. |
no-results | No results found | Try adjusting your search or filters. |
error | Something went wrong | Please try again later. |
offline | You're offline | Check your internet connection. |
empty-search | No matches | We couldn't find anything matching your search. |
Preset values for title, description, and icon are overridden when you supply those props directly.
API #
| Prop | Type | Default | Description |
|---|---|---|---|
| preset | "no-data" | "no-results" | "error" | "offline" | "empty-search" | — | Built-in preset with icon, title, and description |
| icon | ReactNode | — | Custom icon element (overrides preset icon) |
| image | string | ReactNode | — | Image URL or element shown in place of the icon |
| title | ReactNode | — | Heading text (overrides preset title) |
| description | ReactNode | — | Body text (overrides preset description) |
| action | ReactNode | — | Primary action slot |
| secondaryAction | ReactNode | — | Secondary action slot |
| size | "sm" | "md" | "lg" | "md" | Controls icon and font size |
| orientation | "vertical" | "horizontal" | "vertical" | Stack direction — vertical centers content, horizontal aligns left |
| children | ReactNode | — | Custom content rendered inside the body after description and before actions |
| className | string | — | Extra class on the root element |
| style | CSSProperties | — | Inline style override |
Headless API — useEmptyState #
| Option | Type | Description |
|---|---|---|
| title | string | Used as aria-label on the root element |
The hook returns rootProps with role="status" and aria-label set to the title string.