All Projects → Zaid-Ajaj → Feliz.ViewEngine.Htmx

Zaid-Ajaj / Feliz.ViewEngine.Htmx

Licence: MIT license
A library that allows using Htmx attributes with Feliz.ViewEngine

Programming Languages

F#
602 projects

Feliz.ViewEngine.Htmx Nuget

A library that allows using Htmx attributes with Feliz.ViewEngine

Install from Nuget

dotnet add package Feliz.ViewEngine.Htmx

Usage

The library exposes the hx module and type which are the entry point to the attributes available from HTMX

Here is an example AspNet controller (see ./sample application) but this library can be used anywhere to render out HTML

gif

open Microsoft.AspNetCore.Mvc
open Microsoft.Extensions.Logging
open Feliz.ViewEngine
open Feliz.ViewEngine.Htmx

type HomeController (logger : ILogger<HomeController>) =
    inherit Controller()

    (* Utility functions here *)

    member private this.MainLayout (body: ReactElement list) =
        let mainLayout = Html.html [
            Html.head [
                Html.title "F# ♥ Htmx"
                Html.script [ prop.src "https://unpkg.com/[email protected]" ]
                Html.meta [ prop.charset.utf8 ]
            ]

            Html.body body
        ]

        this.Render(mainLayout)

    member this.Clicked() = this.Partial [
        Html.p "Content retrieved by HTMX"
    ]

    member this.Index() = this.MainLayout [
        Html.h1 "Home"
        Html.button [
            hx.get "/Home/Clicked"
            hx.swap.outerHTML
            prop.text "Click me!"
        ]
    ]
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].