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: about 2 months 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 (about 4 years ago)
• Default Branch: master
• Last Pushed: 2023-12-02T16:44:59.000Z (7 months ago)
• Last Synced: 2024-05-01T18:47:07.298Z (2 months 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: 8
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Contributing: Contributing.md
  • License: LICENSE

Lists

• awesome-list - Feliz.Recoil
• awesome-fable - Feliz.Recoil - Fable bindings in Feliz style for Facebook's experimental state management library recoil. (Libraries)

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