Here's an updated and polished version of your README.md with clearer structure, consistent formatting, improved grammar, and better code formatting. I've also added a small enhancement for clarity on the usage of satisfies and other best practices:

🧩 buildProvidersTree – Compose Multiple React Context Providers Elegantly

A tiny utility to help you compose multiple React providers into a single clean component — perfect for organizing your root component tree.

🚀 Features

• ✅ Fully type-safe (no any)
• ✅ Simple, declarative API
• ✅ Works seamlessly with TypeScript’s satisfies keyword
• ✅ Cleans up your root layout logic

📦 Installation

npm install build-providers-tree
# or
yarn add build-providers-tree

✨ Usage Example

✅ With buildProvidersTree

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { buildProvidersTree, ProviderComponent } from "build-providers-tree";

import App from "./App";
import { ThemeProvider } from "./providers/ThemeProvider";
import { TanStackQueryProvider } from "./providers/TanStackQueryProvider";
import { ToasterProvider } from "./providers/ToasterProvider";

const Providers = buildProvidersTree([
  [ThemeProvider, {}] satisfies ProviderComponent<typeof ThemeProvider>,
  [TanStackQueryProvider, {}] satisfies ProviderComponent<typeof TanStackQueryProvider>,
  [ToasterProvider, {}] satisfies ProviderComponent<typeof ToasterProvider>,
] as const);

const root = createRoot(document.getElementById("root")!);

root.render(
  <StrictMode>
    <Providers>
      <App />
    </Providers>
  </StrictMode>
);

❌ Without buildProvidersTree

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import App from "./App";
import { ThemeProvider } from "./providers/ThemeProvider";
import { TanStackQueryProvider } from "./providers/TanStackQueryProvider";
import { ToasterProvider } from "./providers/ToasterProvider";

const root = createRoot(document.getElementById("root")!);

root.render(
  <StrictMode>
    <ThemeProvider>
      <TanStackQueryProvider>
        <ToasterProvider>
          <App />
        </ToasterProvider>
      </TanStackQueryProvider>
    </ThemeProvider>
  </StrictMode>
);

🧠 API Reference

buildProvidersTree(providers)

Wraps multiple providers in a nested tree.

Parameters

buildProvidersTree([
  [ProviderComponent, props],
  ...
] as const);

Each tuple must satisfy ProviderComponent<T>, ensuring props are validated against each provider’s expected props.

ProviderComponent<T>

type ProviderComponent<T extends React.ElementType> = [
  T,
  Omit<React.ComponentProps<T>, "children">
];

Using satisfies ProviderComponent<typeof X> ensures strict type safety for each provider and its props.

🛡️ Type Safety Tips

• ✅ Use as const on the providers array to preserve the tuple structure.
• ✅ Use satisfies to enforce prop types at compile time.
• ✅ Any React provider that accepts children will work.

✅ Tested With

• styled-components ThemeProvider
• @tanstack/react-query QueryClientProvider
• Custom React context providers

📁 Suggested Directory Structure

src/
│
├── providers/
│   ├── buildProvidersTree.ts
│   └── index.ts      # exports composed Providers
│
├── App.tsx
└── main.tsx

📝 License

MIT © [Mohammad Garmabi]

Would you like me to generate the package.json, tsconfig.json, and entry files to publish this as a complete NPM package?