https://github.com/Zaid-Ajaj/Feliz

A fresh retake of the React API in Fable and a collection of high-quality components to build React applications in F#, optimized for happiness
https://github.com/Zaid-Ajaj/Feliz

dsl elmish-applications fable feliz fsharp html react type-safe

Last synced: about 2 months ago
JSON representation

A fresh retake of the React API in Fable and a collection of high-quality components to build React applications in F#, optimized for happiness

• Host: GitHub
• URL: https://github.com/Zaid-Ajaj/Feliz
• Owner: Zaid-Ajaj
• License: mit
• Created: 2019-07-20T18:43:34.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2024-03-26T07:14:30.000Z (3 months ago)
• Last Synced: 2024-05-01T18:47:08.555Z (2 months ago)
• Topics: dsl, elmish-applications, fable, feliz, fsharp, html, react, type-safe
• Language: F#
• Homepage: https://zaid-ajaj.github.io/Feliz/
• Size: 12 MB
• Stars: 522
• Watchers: 21
• Forks: 76
• Open Issues: 42
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-list - Feliz - quality components to build React applications in F#, optimized for happiness | Zaid-Ajaj | 333 | (F#)
• awesome-stars - Zaid-Ajaj/Feliz - A fresh retake of the React API in Fable and a collection of high-quality components to build React applications in F#, optimized for happiness (F# #)
• awesome-fable - Feliz.UseMediaQuery - Hooks to build responsive websites. (Libraries)

README

        
# Feliz [![Nuget](https://img.shields.io/nuget/v/Feliz.svg?maxAge=0&colorB=brightgreen)](https://www.nuget.org/packages/Feliz) [![Build status](https://ci.appveyor.com/api/projects/status/yqinhayy1pgfcubp/branch/master?svg=true)](https://ci.appveyor.com/project/Zaid-Ajaj/feliz/branch/master)

A fresh retake of the React API in Fable, optimized for happiness.

Here is how it looks like:

```fs

module App

open Feliz

[]

let Counter() =

    let (count, setCount) = React.useState(0)

    Html.div [

        Html.button [

            prop.style [ style.marginRight 5 ]

            prop.onClick (fun _ -> setCount(count + 1))

            prop.text "Increment"

        ]

        Html.button [

            prop.style [ style.marginLeft 5 ]

            prop.onClick (fun _ -> setCount(count - 1))

            prop.text "Decrement"

        ]

        Html.h1 count

    ]

open Browser.Dom

let root = ReactDOM.createRoot(document.getElementById "root")

root.render(Counter())

```

### Features

 - Consistent, lightweight **formatting**: no more awkward indentation using two lists for every element.

 - Discoverable **attributes** with no more functions, `Html` attributes or css properties globally available so they are easy to find.

 - Proper **documentation**: each attribute and CSS property

 - Full **React API** support: Feliz aims to support the React API for building components using hooks, context and more.

 - Fully **Type-safe**: no more `Margin of obj` but instead utilizing a plethora of overloaded functions to account for the overloaded nature of `CSS` attributes, covering 90%+ of the CSS styles, values and properties.

 - Included **color list** of most commonly used `Html` colors in the `colors` module.

 - **Compatible** with the current React DSL used in applications.

 - **Compatible** with [Femto](https://github.com/Zaid-Ajaj/Femto).

 - Approximately **Zero** bundle size increase where everything function body is erased from the generated javascript unless you actually use said function.

### Quick Start

```

dotnet new -i Feliz.Template

dotnet new feliz -n MyProject

cd MyProject

npm install

npm start

```

### Documentation

Feliz has extensive documentation at [https://zaid-ajaj.github.io/Feliz](https://zaid-ajaj.github.io/Feliz) with live examples along side code samples, check them out and if you have any question, let us know!