diff --git a/docs/docs/hooks/index.md b/docs/docs/hooks/index.md
index 73f3ef3..a398cca 100644
--- a/docs/docs/hooks/index.md
+++ b/docs/docs/hooks/index.md
@@ -10,6 +10,7 @@ Currently Haunted supports the following hooks:
 - [useEffect](./useEffect/)
 - [useLayoutEffect](./useLayoutEffect/)
 - [useMemo](./useMemo/)
+- [useProvideContext](./useProvideContext/)
 - [useReducer](./useReducer/)
 - [useRef](./useRef/)
 - [useState](./useState/)
diff --git a/docs/docs/hooks/useProvideContext.md b/docs/docs/hooks/useProvideContext.md
new file mode 100644
index 0000000..6c3ee4e
--- /dev/null
+++ b/docs/docs/hooks/useProvideContext.md
@@ -0,0 +1,63 @@
+---
+layout: layout-api
+package: haunted
+module: lib/use-provide-context.js
+---
+
+# Hooks >> useProvideContext
+
+Makes your component become a Context provider. It updates every nested consumer with the current value. You can optionally use a deps array (useful when the context value is mutated instead of being replaced).
+
+```js playground use-provide-context use-provide-context.js
+import {
+  html,
+  component,
+  useState,
+  useContext,
+  createContext,
+  useProvideContext,
+} from "haunted";
+
+const ThemeContext = createContext("dark");
+
+customElements.define("theme-consumer", ThemeContext.Consumer);
+
+function Consumer() {
+  const context = useContext(ThemeContext);
+  return context;
+}
+
+customElements.define("my-consumer", component(Consumer));
+
+function App() {
+  const [theme, setTheme] = useState("light");
+  useProvideContext(ThemeContext, theme);
+
+  return html`
+    <select value=${theme} @change=${(event) => setTheme(event.target.value)}>
+      <option value="dark">Dark</option>
+      <option value="light">Light</option>
+    </select>
+
+    <my-consumer></my-consumer>
+
+    <theme-provider .value=${theme === "dark" ? "light" : "dark"}>
+      <theme-consumer
+        .render=${(value) =>
+          html`
+            <h1>${value}</h1>
+          `}
+      ></theme-consumer>
+    </theme-provider>
+  `;
+}
+
+customElements.define("use-provide-context", component(App));
+```
+
+```html playground-file use-provide-context index.html
+<script type="module" src="use-provide-context.js"></script>
+<use-provide-context></use-provide-context>
+```
+
+## API
diff --git a/docs/docs/index.md b/docs/docs/index.md
index 73c388d..82ab94e 100644
--- a/docs/docs/index.md
+++ b/docs/docs/index.md
@@ -19,6 +19,7 @@
 - [useEffect](./hooks/useEffect/)
 - [useLayoutEffect](./hooks/useLayoutEffect/)
 - [useMemo](./hooks/useMemo/)
+- [useProvideContext](./hooks/useProvideContext/)
 - [useReducer](./hooks/useReducer/)
 - [useRef](./hooks/useRef/)
 - [useState](./hooks/useState/)
diff --git a/readme.md b/readme.md
index 8794ccb..95347eb 100644
--- a/readme.md
+++ b/readme.md
@@ -45,6 +45,7 @@ Currently Haunted supports the following hooks:
 - [useEffect](https://hauntedhooks.netlify.app/docs/hooks/useEffect/)
 - [useLayoutEffect](https://hauntedhooks.netlify.app/docs/hooks/useLayoutEffect/)
 - [useMemo](https://hauntedhooks.netlify.app/docs/hooks/useMemo/)
+- [useProvideContext](https://hauntedhooks.netlify.app/docs/hooks/useProvideContext/)
 - [useReducer](https://hauntedhooks.netlify.app/docs/hooks/useReducer/)
 - [useRef](https://hauntedhooks.netlify.app/docs/hooks/useRef/)
 - [useState](https://hauntedhooks.netlify.app/docs/hooks/useState/)