Overview of Qwik Context API
Qwik's Context API solves the problem of prop drilling by providing an efficient way to pass data to descendant components. It reduces overhead and improves tree-shaking of unused data. The API consists of three primary functions:
createContextId to define the context, useContextProvider to provide the value, and useContext to consume it.import { createContextId, useContextProvider, useContext } from '@builder.io/qwik';
// 1. Create the ID
export const ThemeContext = createContextId<Signal<string>>('docs.theme-context');
// 2. Provide the value in a parent component
export default component$(() => {
const theme = useSignal('dark');
useContextProvider(ThemeContext, theme);
return <Child />;
});
// 3. Consume the value in a child component
const Child = component$(() => {
const theme = useContext(ThemeContext);
return <div>Theme is {theme.value}</div>;
});