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

Motivation

Instead of manually creating a Context, Provider, and custom hook for every store:

const UserContext = createContext<User | null>(null)

export function UserProvider({ children }: PropsWithChildren) {
    const user = useUserLogic()

    return <UserContext.Provider value={user}>{children}</UserContext.Provider>
}

export function useUser() {
    const context = useContext(UserContext)

    if (!context) {
        throw new Error("useUser must be used within UserProvider")
    }

    return context
}

You can generate the entire store from a single function.

Usage

Create a store

import { createStore } from "create-store"

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
}

Error Handling

Using a generated hook outside its provider throws an error:

const user = useUser()

useUser was called out of UserProvider scope

TypeScript Support

Full type inference for:

• Provider props
• Store data
• Generated hook return type

Example:

const { CounterProvider, useCounter } = createStore(
    "Counter",
    ({ initial }: { initial: number }) => {
        const [count] = useState(initial)

        return { count }
    }
)

const counter = useCounter()
// counter.count -> number