useContext

Check out the official React docs!

For more detailed information about React concepts and APIs, please refer to the official documentation for useContext.

---

useContext lets you share state or values between multiple components without passing props down manually at every level.

Context is useful for sharing state, themes, or configuration between deeply nested components without prop drilling. In Feliz, you create a context, provide it at a high level, and consume it in any child component.

It can also be used to configure multiple components with the same settings, such as theming or localization.

// Define a context for shared state
let CounterContext = React.createContext(None: (int * (int -> unit)) option)

[<ReactComponent(true)>]
let CounterProvider(children: ReactElement list) =
    let count, setCount = React.useState(0)
    CounterContext.Provider(Some(count, setCount), children)

[<ReactComponent(true)>]
let CounterDisplay() =
    let ctx = React.useContext(CounterContext)

    // .. use the context value

Shared Counter

Current count: 0

Show code

module Example.UseContext

open Feliz

// Define a context for shared state
// This can should be placed in a separate file for reuse
let CounterContext = React.createContext(None: (int * (int -> unit)) option)

[<ReactComponent>]
let CounterProvider(children: ReactElement list) =
    let count, setCount = React.useState(0)
    CounterContext.Provider(Some(count, setCount), children)

[<ReactComponent>]
let CounterDisplay() =
    let ctx = React.useContext(CounterContext)
    match ctx with
    | Some(count, _) -> Html.p [ prop.text $"Current count: {count}" ]
    | None -> Html.p [ prop.text "No context available" ]

[<ReactComponent>]
let CounterControls() =
    let ctx = React.useContext(CounterContext)
    match ctx with
    | Some(count, setCount) ->
        Html.div [
            Html.button [
                prop.text "+"
                prop.onClick (fun _ -> setCount(count + 1))
            ]
            Html.button [
                prop.text "-"
                prop.onClick (fun _ -> setCount(count - 1))
            ]
        ]
    | None -> Html.p [ prop.text "No context available" ]

[<ReactComponent(true)>]
let UseContext() =
    CounterProvider [
        Html.h3 [ prop.text "Shared Counter" ]
        CounterDisplay()
        CounterControls()
    ]

Feliz specifics

The API closely matches React's JavaScript version, but you should specify the type for the context value due to F#'s strong typing.