Skip to content

Fable bindings in Feliz style for Facebook's experimental state management library recoil.

License

Notifications You must be signed in to change notification settings

Shmew/Feliz.Recoil

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Feliz.Recoil Nuget

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.

About

Fable bindings in Feliz style for Facebook's experimental state management library recoil.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages