It works like elm/html, and the context can be used anywhere.
view : Model -> Html Msg
view model =
let
contextValue = ...
in
viewChild1 contextValue
viewChild1 contextValue =
-- `contextValue` is not used in this View,
-- but is received and through for use in descendant View.
viewChild2 contextValue
viewChild2 contextValue =
viewChild3 contextValue
...
viewChildN contextValue =
div [] [ text contextValue ]
import ContextHtml exposing (..)
type alias Context =
{ contextValue : String
}
view : Model -> ContextHtml Context Msg
view model =
viewChild1
viewChild1 =
viewChild2
viewChild2 =
viewChild3
...
viewChildN =
-- Take out the value as needed.
useContext .contextValue <|
\contextValue -> div [] [ text contextValue ]
Refer to Example.elm
for details.
HTML tags defined in ContextHtml returns ContextHtml ctx msg
.
-- Import `ContextHtml` instead of `Html`
import ContextHtml exposing (..)
import Html.Attributes exposing (..)
view : Model -> HtmlWithContext Msg
view model =
div [] [ text "Text" ]
type alias HtmlWithContext msg =
ContextHtml Context msg
type alias Context =
{ contextValue : String
}
To use a value of Context, use useContext
.
useContext2
, useContext3
, etc. are available for using multiple values.
viewWithContext : HtmlWithContext Msg
viewWithContext =
useContext .contextValue <|
\v -> div [] [ text v ]
import Browser
main =
Browser.sandbox
{ init = init
, update = update
, view = view = \( model, ctx ) -> applyContext ctx (view model)
}
init : ( Model, Context )
init = ...
update : Msg -> ( Model, Context ) -> ( Model, Context )
update msg ( model, context ) = ...
view : Model -> ContextHtml Context Msg
view model = ...