/Knowledge/sources/honojs__hono/llms-full/jsx-context--7e900f7d97e5.md
JSX: Context - hono-docs
JSX: Context Source evidence: /Sources/honojs hono/provenance.md Canonical citation: https://hono.dev/llms full.txt context Summary By using useContext, you...
JSX: Context
Source evidence: /Sources/honojs__hono/provenance.md Canonical citation: https://hono.dev/llms-full.txt#context
Summary
By using useContext, you can share data globally across any level of the Component tree without passing values through props. ```tsx import type { FC } from 'hono/jsx' import { createContext, useContext } from 'hono/jsx' const themes =...
Content
By using useContext, you can share data globally across any level of the Component tree without passing values through props.
import type { FC } from 'hono/jsx'
import { createContext, useContext } from 'hono/jsx'
const themes = {
light: {
color: '#000000',
background: '#eeeeee',
},
dark: {
color: '#ffffff',
background: '#222222',
},
}
const ThemeContext = createContext(themes.light)
const Button: FC = () => {
const theme = useContext(ThemeContext)
return <button style={theme}>Push!</button>
}
const Toolbar: FC = () => {
return (
<div>
<Button />
</div>
)
}
// ...
app.get('/', (c) => {
return c.html(
<div>
<ThemeContext.Provider value={themes.dark}>
<Toolbar />
</ThemeContext.Provider>
</div>
)
})
Metadata
{
"chunk_index": 0,
"citation": "https://hono.dev/llms-full.txt#context",
"coverage_role": "overview",
"qualified_title": "Hono / llms-full / JSX > Context",
"retrieved_at": "2026-07-02T05:51:01Z",
"section_index": 22,
"source_id": "/honojs/hono",
"source_type": "llms_full",
"target_label": "llms-full",
"title": "JSX: Context",
"upstream_url": "https://hono.dev/llms-full.txt",
"version": "2026"
}
Kinic Wiki