react-data-state

A lightweight React component to handle loading, error, and empty states with clean defaults and easy customization.

Install

npm install react-data-state

Usage

import { DataState } from "react-data-state";

<DataState
  loading={loading}
  error={error}
  data={users}
  onRetry={refetchUsers}
  emptyProps={{ message: "No users found" }}
>
  {(data) => (
    <ul>
      {data.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  )}
</DataState>;

Optional: Customize

<DataState
  loading={loading} // define your loading state
  error={error} // define your error state
  data={users} // define your data state
  onRetry={refetch} // define your retry function
  loadingProps={{
    color: "#22c55e", // color of the spinner
    trackColor: "#1f2937", // color of the spinner track
    size: 30, // size of the spinner in pixels
    thickness: 3, // thickness of the spinner
    speedMs: 650, // speed in milliseconds for one full rotation
  }}
  errorProps={{
    bgColor: "#2a1010", // background color of the error message
    borderColor: "#ef4444", // border color of the error message
    color: "#fecaca", // text color of the error message
    retryLabel: "Try again", // label for the retry button
    buttonBgColor: "#ef4444", // background color of the retry button
    buttonTextColor: "#111827", // text color of the retry button
  }}
  emptyProps={{
    message: "No users found", // message to display when data is empty
    icon: "🔎", // Support: emoji, image, inline svg, Font Awesome element and React-icons component type
    color: "#94a3b8", //  text color of the empty message
    bgColor: "#0f172a", // background color of the empty message
  }}
>
  {(data) => (
    // Render your data here, like example above ↑
  )}
</DataState>

Repo

GitHub: https://github.com/Bunheng-Dev/react-data-state