Awesome
Feliz.Recoil ![Nuget](https://img.shields.io/nuget/v/Feliz.Recoil.svg?maxAge=0&colorB=brightgreen)
Fable bindings in Feliz style for Facebook's experimental state management library recoil.
A great intro to the library can be found here.
A quick look:
open Feliz
open Feliz.Recoil
let textState = Recoil.atom("textState", "Hello world!")
let vowels = [ 'a'; 'e'; 'i'; 'o'; 'u' ]
let textStateTransform =
Recoil.selector(fun getter ->
getter.get(textState)
|> String.filter(fun v -> List.contains v vowels)
)
let inner = React.functionComponent(fun () ->
let setAtomText = Recoil.useSetState(textState)
let text = Recoil.useValue(textStateTransform)
Html.div [
Html.div [
prop.text (sprintf "Transformed value: %s" text)
]
Html.input [
prop.type'.text
prop.onTextChange setAtomText
]
])
let otherInner = React.functionComponent(fun () ->
let textAtom = Recoil.useValue(textState)
Html.div [
prop.text (sprintf "Atom current value: %s" textAtom)
])
let render = React.functionComponent(fun () ->
Recoil.root [
inner()
otherInner()
])
Full documentation with live examples can be found here.