mirror of
https://github.com/yewstack/yew.git
synced 2025-12-08 21:26:25 +00:00
dc60d6099e
* Docs overhaul part2 * fix links and require them for CI * remove translations for 0.17 * remove a bunch of unused documentation * run prettier * fixup links and locations of some translations
66 lines
1.6 KiB
Plaintext
66 lines
1.6 KiB
Plaintext
---
|
|
title: 'use_context'
|
|
---
|
|
|
|
[Contexts](../../contexts.mdx) will be introduced later.
|
|
|
|
`use_context` is used for consuming [contexts](../../contexts.mdx) in function components.
|
|
|
|
## Example
|
|
|
|
```rust
|
|
use yew::{ContextProvider, function_component, html, use_context, use_state, Html};
|
|
|
|
|
|
/// App theme
|
|
#[derive(Clone, Debug, PartialEq)]
|
|
struct Theme {
|
|
foreground: String,
|
|
background: String,
|
|
}
|
|
|
|
/// Main component
|
|
#[function_component]
|
|
pub fn App() -> Html {
|
|
let ctx = use_state(|| Theme {
|
|
foreground: "#000000".to_owned(),
|
|
background: "#eeeeee".to_owned(),
|
|
});
|
|
|
|
html! {
|
|
// `ctx` is type `Rc<UseStateHandle<Theme>>` while we need `Theme`
|
|
// so we deref it.
|
|
// It derefs to `&Theme`, hence the clone
|
|
<ContextProvider<Theme> context={(*ctx).clone()}>
|
|
// Every child here and their children will have access to this context.
|
|
<Toolbar />
|
|
</ContextProvider<Theme>>
|
|
}
|
|
}
|
|
|
|
/// The toolbar.
|
|
/// This component has access to the context
|
|
#[function_component]
|
|
pub fn Toolbar() -> Html {
|
|
html! {
|
|
<div>
|
|
<ThemedButton />
|
|
</div>
|
|
}
|
|
}
|
|
|
|
/// Button placed in `Toolbar`.
|
|
/// As this component is a child of `ThemeContextProvider` in the component tree, it also has access to the context.
|
|
#[function_component]
|
|
pub fn ThemedButton() -> Html {
|
|
//highlight-next-line
|
|
let theme = use_context::<Theme>().expect("no ctx found");
|
|
|
|
html! {
|
|
<button style={format!("background: {}; color: {};", theme.background, theme.foreground)}>
|
|
{ "Click me!" }
|
|
</button>
|
|
}
|
|
}
|
|
```
|