# @solid-primitives/context

> Primitives simplifying or extending the SolidJS Context API

Latest version **0.3.2** (published 2025-06-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install @solid-primitives/context
pnpm add @solid-primitives/context
yarn add @solid-primitives/context
bun add @solid-primitives/context
```

## Health

**Score 55/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads; pre 1.0.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 0.3.2 |
| Published | 2025-06-29 |
| First published | 2022-02-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 0 |
| Unpacked size | 12 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1558 |
| Author | Damian Tarnawski @thetarnav |
| Maintainers | davedbase, lexlohr, thetarnav. |
| Keywords | provider, context, solid, primitives |

## Links

- npm: https://www.npmjs.com/package/@solid-primitives/context
- Repository: https://github.com/solidjs-community/solid-primitives
- Homepage: https://primitives.solidjs.community/package/context
- Issues: https://github.com/solidjs-community/solid-primitives/issues
- npm.io page: https://npm.io/package/@solid-primitives/context

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 0.3.2 (latest) — 2025-06-29
- 2.0.0-next.2 (next) — 2026-08-12
- 2.0.0-next.1 — 2026-07-18
- 2.0.0-next.0 — 2026-06-26
- 0.3.1 — 2025-04-27
- 0.3.0 — 2025-01-22
- 0.2.3 — 2024-03-05
- 0.2.2 — 2024-01-16
- 0.2.1 — 2023-03-23
- 0.2.0 — 2023-03-16
- 0.1.4 — 2023-02-28
- 0.1.3 — 2023-01-18
- 0.1.2 — 2022-10-20
- 0.1.1 — 2022-08-26
- 0.1.0 — 2022-04-14
- … 1 more at https://npm.io/package/@solid-primitives/context/versions

## README

<p>
  <img width="100%" src="https://assets.solidjs.com/banner?type=Primitives&background=tiles&project=Context" alt="Solid Primitives Context">
</p>

# @solid-primitives/context

[![size](https://img.shields.io/bundlephobia/minzip/@solid-primitives/context?style=for-the-badge&label=size)](https://bundlephobia.com/package/@solid-primitives/context)
[![version](https://img.shields.io/npm/v/@solid-primitives/context?style=for-the-badge)](https://www.npmjs.com/package/@solid-primitives/context)
[![stage](https://img.shields.io/endpoint?style=for-the-badge&url=https%3A%2F%2Fraw.githubusercontent.com%2Fsolidjs-community%2Fsolid-primitives%2Fmain%2Fassets%2Fbadges%2Fstage-2.json)](https://github.com/solidjs-community/solid-primitives#contribution-process)

Primitives simplifying the creation and use of SolidJS Context API.

- [`createContextProvider`](#createcontextprovider) - Create the Context Provider component and useContext function with types inferred from the factory function.
- [`MultiProvider`](#multiprovider) - A component that allows you to provide multiple contexts at once.

## Installation

```bash
npm install @solid-primitives/context
# or
pnpm add @solid-primitives/context
# or
yarn add @solid-primitives/context
```

## `createContextProvider`

Create the Context Provider component and useContext function with types inferred from the factory function.

### How to use it

Given a factory function, `createContextProvider` creates a SolidJS Context and returns both a Provider component for setting the context, and a useContext helper for getting the context. The factory function gets called when the provider component gets executed; all `props` of the provider component get passed into the factory function, and what it returns will be available in the contexts for all the underlying components. The types of the provider props and context are inferred from the factory function.

```tsx
import { createContextProvider } from "@solid-primitives/context";

const [CounterProvider, useCounter] = createContextProvider((props: { initial: number }) => {
  const [count, setCount] = createSignal(props.initial);
  const increment = () => setCount(count() + 1);
  return { count, increment };
});

// Provide the context
<CounterProvider initial={1}>
  <App />
</CounterProvider>;

// Use the context in a child component
const ctx = useCounter();
ctx; // T: { count: () => number; increment: () => void; } | undefined
```

### Providing context fallback

The `createContextProvider` primitive takes a second, optional argument for providing context defaults for when the context wouldn't be provided higher in the component tree.
Providing a fallback also removes `undefined` from `T | undefined` return type of the `useContext` function.

```ts
const [CounterProvider, useCounter] = createContextProvider(
  () => {
    const [count, setCount] = createSignal(0);
    const increment = () => setCount(count() + 1);
    return { count, increment };
  },
  {
    count: () => 0,
    increment: () => {},
  },
);

// then when using the context:
const { count } = useCounter();
```

Definite context types without defaults:

```ts
const useDefiniteCounter = () => useCounter()!;
```

### Demo

https://codesandbox.io/s/solid-primitives-context-demo-oqyie2?file=/index.tsx

## `MultiProvider`

A component that allows you to provide multiple contexts at once.

It will work exactly like nesting multiple providers as separate components, but it will save you from the nesting.

### How to use it

`MultiProvider` takes only a single `values` with a key-value pair of the context and the value to provide.

> **Note**
> Values list is evaluated in order, so the context values will be provided in the same way as if you were nesting the providers.

```tsx
import { MultiProvider } from "@solid-primitives/context";

// before
<FooContext.Provider value={"foo"}>
  <BarContext.Provider value={"bar"}>
    <BazContext.Provider value={"baz"}>
      <MyCustomProviderComponent value={"hello-world"}>
        <BoundContextProvider>
          <App />
        </BoundContextProvider>
      </MyCustomProviderComponent>
    </BazContext.Provider>
  </BarContext.Provider>
</FooContext.Provider>;

// after
<MultiProvider
  values={[
    [FooContext, "foo"],
    [BarContext, "bar"],
    [BazContext, "baz"],
    // you can also provide a component, the value will be passed to a `value` prop
    [MyCustomProviderComponent, "hello-world"],
    // if you have a provider that doesn't accept a `value` prop, you can just pass a function
    BoundContextProvider,
  ]}
>
  <App />
</MultiProvider>;
```

> **Warning**
> Components and values passed to `MultiProvider` will be evaluated only once, so make sure that the structure is static. If is isn't, please use nested provider components instead.

## Changelog

See [CHANGELOG.md](./CHANGELOG.md)

---
_Source: https://npm.io/package/@solid-primitives/context · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._