Prompt Buddy logoPrompt Buddy

preact · Preact Docs

Preact Context

Explains how to implement the Context API in Preact to manage global state and avoid prop drilling by using the createContext function, Providers, and Consumers.

Import to Prompt Buddy

Derived skill

Files assembled from official documentation

Viewing SKILL.md

Preact Context

Explains how to implement the Context API in Preact to manage global state and avoid prop drilling by using the createContext function, Providers, and Consumers.

When To Use

Use when you need to pass data through multiple layers of a component tree without manually passing props through every intermediate component.

Reference Files

FileContainsUse For
SKILL.mdEntry point: scope, routing table, and workflow.Start here.
docs/preact-context-workflow-guide.mdA comprehensive guide covering the essentials, debugging, testing, and advanced usage of the Preact Context API.Questions about a comprehensive guide covering the essentials, debugging, testing, and advanced usage of the Preact Context API.
examples/preact-context-api-usage.textA text-based demonstration of creating and using multiple context providers and consumers in Preact.Exact payloads, commands, or snippets shown in A text-based demonstration of creating and using multiple context providers and consumers in Preact.
examples/preact-context-createcontext.textA code example demonstrating how to use the createContext function in Preact to manage shared state.Exact payloads, commands, or snippets shown in A code example demonstrating how to use the createContext function in Preact to manage shared state.
examples/preact-context-createcontext-component.textA code example demonstrating how to use createContext and static contextType within a Preact component to manage theme state.Exact payloads, commands, or snippets shown in A code example demonstrating how to use createContext and static contextType within a Preact component to manage them...
examples/preact-context-createcontext-usecontext.textA code example demonstrating how to use createContext and useContext to manage theme state in a Preact application.Exact payloads, commands, or snippets shown in A code example demonstrating how to use createContext and useContext to manage theme state in a Preact application.
examples/preact-context-createcontext-usage.textA code example demonstrating how to use the createContext function to pass data through the component tree in Preact.Exact payloads, commands, or snippets shown in A code example demonstrating how to use the createContext function to pass data through the component tree in Preact.
examples/preact-context-usecontext-theme.textA code example demonstrating how to implement a theme switcher using the Preact Context API and the useContext hook.Exact payloads, commands, or snippets shown in A code example demonstrating how to implement a theme switcher using the Preact Context API and the useContext hook.
examples/preact-context-component-class.textA code example demonstrating how to use the getChildContext method within a class component to provide context in Preact.Exact payloads, commands, or snippets shown in A code example demonstrating how to use the getChildContext method within a class component to provide context in Pre...

What This Skill Covers

  • Guide Version: 11.x (preview) 10.x (current) 8.x
  • Main sections: Introduction, Essentials, Debug & Test, Advanced, Libraries.

Workflow

  1. Open the most relevant file under docs/ for the exact documented workflow and wording.
  2. Open schemas/ files for exact structured contracts.
  3. Open examples/ files for concrete requests, commands, snippets, and manifests.
  4. Do not add behavior or configuration that is not present in the attached source files.

Canonical source: https://preactjs.com/guide/v10/context