createProvider

createProvider creates a StoreProvider component that provides store to its child components. The store will be disposed of when the component is unmounted.

createProvider(hooks: StoreHook[]): StoreProvider

Parameters

• hooks: An array of hooks that will be used as the store.

Returns

StoreProvider is a React component that provides store to its child components.

Usage

Use a single root provider

provider.ts

// ...
import { createProvider } from "houp";

export const Provider = createProvider([someHook, someHook2]);

index.tsx

import { StrictMode } from "react"
import { createRoot } from "react-dom/client"
import App from "./App"
import { Provider } from "./provider";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <Provider>
      <App />
    </Provider>
  </StrictMode>,
)

Use standalone provider

In most cases, using a single provider is sufficient. However, if you're rendering different components into separate DOM nodes or need a scoped store, you may need to create a standalone provider.

In this example, two distinct React components are rendered into two different DOM nodes.

provider1.ts

// ...
import { createProvider } from "houp";

export const App1Provider = createProvider([someHook, someHook2]);

provider2.ts

// ...
import { createProvider } from "houp";

export const App2Provider = createProvider([someHook, someHook3, someHook4]);

index.tsx

import { createRoot } from "react-dom/client";
import "./index.css";
import App1 from "./App1";
import App2 from "./App2";
import { App1Provider } from "./provider1";
import { App2Provider } from "./provider2";

createRoot(document.getElementById("root1")!).render(
    <App1Provider>
        <App1 />
    </App1Provider>
)

createRoot(document.getElementById("root2")!).render(
    <App2Provider>
        <App2 />
    </App2Provider>
)

In this case, App1 uses App1Provider, while App2 uses App2Provider. In App1 or App2, you can use the following code to access the store.

component in App1 or App2

import { useStore } from "houp";

const store = useStore(someHook);

This will ensure that the stores in App1 and App2 are independent of each other, even though they use the same hook.