diff --git a/.changeset/strong-moose-attend.md b/.changeset/strong-moose-attend.md
new file mode 100644
index 000000000..0de537f90
--- /dev/null
+++ b/.changeset/strong-moose-attend.md
@@ -0,0 +1,5 @@
+---
+"@solid-primitives/context": minor
+---
+
+Add `ConsumeContext`
diff --git a/packages/context/README.md b/packages/context/README.md
index 4b2b0eae7..0a719c8fd 100644
--- a/packages/context/README.md
+++ b/packages/context/README.md
@@ -12,6 +12,7 @@ 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.
+- [`ConsumeContext`](#consumecontext) - A component that allows you to consume contexts directly within JSX.
## Installation
@@ -130,6 +131,59 @@ import { MultiProvider } from "@solid-primitives/context";
> **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.
+## `ConsumeContext`
+
+Inspired by React's `Context.Consumer` component, `ConsumeContext` allows using contexts directly within JSX without the needing to extract the content JSX into a separate function.
+
+This is particularly useful when you want to use the context in the same JSX block where you're providing it and directly bind the context value to the frontend.
+
+Note that this component solely serves as syntactic sugar and doesn't provide any additional functionality over inlining SolidJS's `useContext` hook within JSX.
+
+### How to use it
+
+`ConsumeContext` takes a `use` prop that can be either one of the following:
+* A `use...()` function returned by `createContextProvider` or a inline function that returns the context value like `() => useContext(MyContext)`.
+* A `context` prop that takes a raw SolidJS context created by `createContext()`.
+
+```tsx
+import { createContextProvider, ConsumeContext } from "@solid-primitives/context";
+
+// Create a context provider
+const [CounterProvider, useCounter] = createContextProvider(() => {
+ const [count, setCount] = createSignal(0);
+ const increment = () => setCount(count() + 1);
+ return { count, increment };
+});
+
+// Provide it, consume it and use it in the same JSX block
+
+
+ {({ count, increment }) => (
+
+
+ {count()}
+
+ )}
+
+
+```
+
+With the raw SolidJS context returned by `createContext()`:
+
+```tsx
+import { ConsumeContext } from "@solid-primitives/context";
+
+// Create a context
+const counterContext = createContext(/*...*/);
+
+// Consume it using the raw context
+
+ {({ count, increment }) => {
+ // ...
+ }}
+
+```
+
## Changelog
See [CHANGELOG.md](./CHANGELOG.md)
diff --git a/packages/context/src/index.ts b/packages/context/src/index.ts
index 5af8c7a7b..741300391 100644
--- a/packages/context/src/index.ts
+++ b/packages/context/src/index.ts
@@ -119,3 +119,65 @@ export function MultiProvider(props
};
return fn(0);
}
+
+/**
+ * A component that allows you to consume a context without extracting the children into a separate function.
+ * This is particularly useful when the context needs to be used within the same JSX where it is provided.
+ *
+ * The `ConsumeContext` component is equivalent to the following code and solely exists as syntactic sugar:
+ *
+ * ```tsx
+ *
+ * {untrack(() => {
+ * const context = useContext(counterContext); // or useCounter()
+ * return children(context);
+ * })}
+ *
+ * ```
+ *
+ * @param use Either one of the following:
+ * - A function that returns the context value. Preferably the `use...()` function returned from `createContextProvider()`.
+ * - The context itself returned from `createContext()`.
+ * - A inline function that returns the context value.
+ *
+ * @example
+ * ```tsx
+ * // create the context
+ * const [CounterProvider, useCounter] // = createContextProvider(...)
+ *
+ * // provide and use the context
+ *
+ *
+ * {({ count }) => (
+ *