Giter Site home page Giter Site logo

roboz0r / feliz Goto Github PK

View Code? Open in Web Editor NEW

This project forked from zaid-ajaj/feliz

0.0 0.0 0.0 9.08 MB

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

Home Page: https://zaid-ajaj.github.io/Feliz/

License: MIT License

Batchfile 0.01% F# 98.25% Shell 0.08% HTML 0.18% JavaScript 1.41% CSS 0.08%

feliz's Introduction

Feliz Nuget Build status

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

Here is how it looks like:

module App

open Feliz

[<ReactComponent>]
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

ReactDOM.render(Counter(), document.getElementById "root")

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.
  • Approximately Zero bundle size increase where everything function body is erased from the generated javascript unless you actually use said function.

Documentation

Documentation on the improvements implemented in Feliz with respect to Fable 3 are currently WIP! Please hold tight until we update it and publish a migration guide.

Feliz has extensive documentation at 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!

feliz's People

Contributors

alfonsogarciacaro avatar aspnetde avatar brase avatar bzuu avatar callumvass avatar cmeeren avatar dbrattli avatar dependabot[bot] avatar dzoukr avatar gastove avatar jamesrandall avatar joahim avatar kaashyapan avatar kerams avatar l3m avatar landy avatar linschlager avatar lordnull avatar mangelmaxime avatar roboz0r avatar saidziani avatar samme78 avatar samuel-dufour avatar shmew avatar slang25 avatar thisfunctionaltom avatar titaye avatar twith2sugars avatar zaid-ajaj avatar zanaptak avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.