Reactivity

Reactivity in Feliz is built on top of React's hooks API. Information can be stored in component state using the useState hook. Changes to state trigger a re-render of the component.

Check out the example below!

Follow along with React docs

If you are new to React, we recommend reading the React documentation tutorial!

0

Show code

module Example.Counter

open Fable.Core
open Feliz

[<Erase; Mangle(false)>]
type Counter =

    [<ReactComponent(true)>]
    static member Counter() =
    
        let (count, setCount) = React.useState 0

        Html.div [
            Html.h1 count
            Html.button [
                prop.text "Increment"
                prop.onClick (fun _ -> setCount(count + 1))
            ]
        ]

You can read more about Reacts implementation in Feliz in the React API documentation.