Context Factory

Type-safe factory for creating React Context stores with Provider and hook pairs.

Installation

# npm
npm install context-factory

# yarn
yarn add context-factory

# pnpm
pnpm add context-factory

Usage

Create a store

import { createStore } from "context-factory"

const { UserProvider, useUser } = createStore(
    "User",
    ({ userId }: { userId: string }) => {
        return {
            id: userId,
            isAdmin: userId === "admin",
        }
    }
)

Provide the store

function App() {
    return (
        <UserProvider userId="123">
            <Profile />
        </UserProvider>
    )
}

Consume the store

function Profile() {
    const user = useUser()

    return <div>{user.id}</div>
}

API

createStore(name, hook)

Creates a React Context store.

Parameters

name

name: Capitalize<string>

Store name used to generate:

• ${name}Provider
• use${name}

Example:

createStore("User", ...)

Produces:

UserProvider
useUser

hook

(params: StoreParameters) => StoreData

A hook or factory function that returns the store value.

Example:

({ id }: { id: string }) => ({
    id,
})

Return Value

const {
    UserProvider,
    useUser,
} = createStore(...)

Generated types:

{
    UserProvider: ComponentType<PropsWithChildren<StoreParameters>>
    useUser: () => StoreData
}