https://github.com/shmew/feliz.recoil

Fable bindings in Feliz style for Facebook's experimental state management library recoil.
https://github.com/shmew/feliz.recoil

fable feliz recoil state-management

Last synced: 22 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/shmew/feliz.recoil
• Owner: Shmew
• License: mit
• Created: 2020-05-16T06:02:15.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-12-02T16:44:59.000Z (about 1 year ago)
• Last Synced: 2024-11-13T06:43:23.107Z (about 1 month ago)
• Topics: fable, feliz, recoil, state-management
• Language: F#
• Homepage: https://shmew.github.io/Feliz.Recoil/
• Size: 20.7 MB
• Stars: 46
• Watchers: 3
• Forks: 9
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Contributing: Contributing.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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/).