Sharing context between components

[JordanMarr]

What do you think would be the best way to handle state shared between components when using Fable.Lit with hook components with their own state (and not using global elmish loop)?
Obviously you can "prop drill" and pass from parent into child components, but that can become problematic.
In React, it is common to use the useContext hook. What might this look like in Fable.Lit?

Asking for me, and also because someone asked me and my response was to "use global elmish loop", which isn't the best answer if you like to have more stateful components.

@AngelMunoz

[AngelMunoz]

there's nothing baked in for that, but my answer here kind of explains my thoughts behind this
#44 (reply in thread)

I think we can attempt something like a custom hook that uses Fable.Store or a similar mechanism under the hood, quoting myself from there:

I'm thinking something Fable.Store (or even a simple map) that keeps track of the context of the user and the hook just takes the values present in the store

// stores.fs / contexts.fs
let MyContext = new Store({ Theme = Theme.Light })

// app.fs

open Lit
[<HookComponent>]
let MyComponent() =
    let context = Hook.useContext (MyContext)
    html $"<p>Current Theme is {context.Theme}</p>"

the useContext/useStore hook would trigger a re-render when the values of the store change I think that could accomplish a similar goal to what context does but I don't have anything concrete in mind