Feliz.Recoil

KO | EN

gitlite — search

#python #cli #ai #mcp #javascript #golang #tailwindcss #study-material #css #html #mcp-server #llm

★ 46 Open GitHub ↗

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

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Feliz.Recoil [![Nuget](https://img.shields.io/nuget/v/Feliz.Recoil.svg?maxAge=0&colorB=brightgreen)](https://www.nuget.org/packages/Feliz.Recoil)

Fable bindings in Feliz style for Facebook's experimental state management library [recoil](https://github.com/facebookexperimental/Recoil).

A great intro to the library can be found [here](https://www.youtube.com/watch?v=_ISAA_Jt9kI).

A quick look:

```fs
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](https://shmew.github.io/Feliz.Recoil/).

Feliz.Recoil

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README