### Feliz Project Quick Start

Source: https://github.com/zaid-ajaj/feliz/blob/master/README.md

This command sequence outlines the steps to quickly start a new project using the Feliz template. It involves installing the Feliz template globally, creating a new project, installing npm dependencies, and starting the development server.

```bash
dotnet new -i Feliz.Template
dotnet new feliz -n MyProject
cd MyProject
npm install
npm start
```

--------------------------------

### Install Feliz.RoughViz

Source: https://github.com/zaid-ajaj/feliz/blob/master/public/RoughViz/Index.md

Provides instructions for installing Feliz.RoughViz using Femto, dotnet CLI, and npm.

```bash
femto install Feliz.RoughViz
dotnet add package Feliz.RoughViz
npm install --save @inocan/rough-viz
```

--------------------------------

### Install Feliz.Recharts with Femto

Source: https://github.com/zaid-ajaj/feliz/blob/master/public/Recharts/Installation.md

Installs Feliz.Recharts and its dependencies using the Femto tool.

```bash
cd ./project
femto install Feliz.Recharts
```

--------------------------------

### Install Feliz with Femto

Source: https://github.com/zaid-ajaj/feliz/blob/master/public/Feliz/Installation.md

Uses Femto to automatically install Feliz and its required npm packages.

```bash
cd ./project
femto install Feliz
```

--------------------------------

### Install Feliz.PigeonMaps with Femto

Source: https://github.com/zaid-ajaj/feliz/blob/master/public/PigeonMaps/Installation.md

This snippet demonstrates how to install the Feliz.PigeonMaps library using the Femto package manager. Navigate to your project directory and run the 'femto install' command.

```bash
cd ./project
femto install Feliz.PigeonMaps
```

--------------------------------

### Install Feliz.UseElmish

Source: https://github.com/zaid-ajaj/feliz/blob/master/public/Feliz.UseElmish/Index.md

Instructions for installing Feliz.UseElmish using npm and .NET CLI. This includes adding the package to your project and potentially using `dotnet femto`.

```bash
npm install use-sync-external-store
dotnet add package Feliz.UseElmish

or

dotnet femto install Feliz.UseElmish
```

--------------------------------

### Install Feliz.Popover

Source: https://github.com/zaid-ajaj/feliz/blob/master/public/Popover/README.md

Instructions for installing the Feliz.Popover library via dotnet CLI and npm.

```bash
dotnet add package Feliz.Popover
```

```bash
npm install --save react-popover
```

```bash
cd ./project
femto install Feliz.Popover
```

--------------------------------

### Install Feliz.Kawaii using Femto

Source: https://github.com/zaid-ajaj/feliz/blob/master/public/Feliz.Kawaii/README.md

This command installs the Feliz.Kawaii library using the Femto package manager. Ensure Femto is installed and configured in your project.

```bash
femto install Feliz.Kawaii
```

--------------------------------

### Start Development Server

Source: https://github.com/zaid-ajaj/feliz/blob/master/Feliz.Template/Content/README.md

Starts the development server with hot module reloading. Compiles the project and makes it available at http://localhost:8080.

```bash
npm start
```

--------------------------------

### Install Feliz.Recharts using .NET CLI

Source: https://github.com/zaid-ajaj/feliz/blob/master/public/Recharts/Installation.md

Installs the Feliz.Recharts NuGet package using the .NET command-line interface.

```bash
dotnet add package Feliz.Recharts
```

--------------------------------

### Install Feliz Project Template

Source: https://github.com/zaid-ajaj/feliz/blob/master/public/Feliz/ProjectTemplate.md

Installs the Feliz.Template NuGet package globally, making it available for creating new Feliz projects.

```bash
dotnet new -i Feliz.Template
```

--------------------------------

### Install React Dependencies

Source: https://github.com/zaid-ajaj/feliz/blob/master/public/Feliz/Installation.md

Installs the required React and ReactDOM npm dependencies for Feliz.

```bash
npm install react@17.0.1 react-dom@17.0.1
```

--------------------------------

### Install NPM Dependencies

Source: https://github.com/zaid-ajaj/feliz/blob/master/Feliz.Template/Content/README.md

Installs all necessary npm dependencies for the project.

```bash
npm install
```

--------------------------------

### Create New Feliz Project

Source: https://github.com/zaid-ajaj/feliz/blob/master/public/Feliz/ProjectTemplate.md

Creates a new Feliz project named 'AwesomeApp' using the installed Feliz.Template.

```bash
dotnet new feliz -n AwesomeApp
```

--------------------------------

### Install Feliz.Recharts using Paket

Source: https://github.com/zaid-ajaj/feliz/blob/master/public/Recharts/Installation.md

Installs the Feliz.Recharts NuGet package using the Paket package manager.

```bash
paket add Feliz.Recharts --project ./project/path
```

--------------------------------

### Install Feliz NuGet Package

Source: https://github.com/zaid-ajaj/feliz/blob/master/public/Feliz/Installation.md

Installs the Feliz NuGet package into your F# project using either the dotnet CLI or Paket package manager.

```bash
# nuget
dotnet add package Feliz
# paket
paket add Feliz --project ./project/path
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/zaid-ajaj/feliz/blob/master/public/Feliz/ProjectTemplate.md

Installs project dependencies using npm, typically after scaffolding a new Feliz project.

```bash
npm install
```

--------------------------------

### Install Feliz.PigeonMaps Nuget Package

Source: https://github.com/zaid-ajaj/feliz/blob/master/public/PigeonMaps/Installation.md

This snippet shows the command to add the Feliz.PigeonMaps Nuget package to your .NET project. This is a manual installation step for .NET applications.

```bash
dotnet add package Feliz.PigeonMaps
```

--------------------------------

### Run Feliz Development Server

Source: https://github.com/zaid-ajaj/feliz/blob/master/public/Feliz/ProjectTemplate.md

Starts the webpack-dev-server to run the Feliz application locally, usually at http://localhost:8080. Also shows the shorthand command.

```bash
npm run start
npm start
```

--------------------------------

### Run Tests in Watch Mode

Source: https://github.com/zaid-ajaj/feliz/blob/master/Feliz.Template/Content/README.md

Runs tests in watch mode, starting a development server for the test application at http://localhost:8085.

```bash
npm run test:live
```

--------------------------------

### Feliz Type-Safe Styling Examples

Source: https://github.com/zaid-ajaj/feliz/blob/master/public/Feliz/TypeSafeStyling.md

Demonstrates various type-safe styling properties available in Feliz, including display, font size, colors, borders, shadows, and transforms. These examples showcase how to apply valid CSS values directly within F# code, ensuring type safety.

```fs
let exampleDiv =
    Html.div [
        prop.style [
            style.display.flex
            style.display.none
            style.fontSize 20
            style.borderRadius 15
            style.textAlign.center
            style.alignContent.flexStart
            style.textDecorationColor.blue
            style.visibility.hidden
            style.textDecoration.lineThrough
            style.position.sticky
            style.borderBottomWidth 20
            style.borderBottomWidth (length.em 10)
            style.borderBottomColor color.red
            style.borderBottomStyle borderStyle.dashed
            style.borderStyle.dotted
            style.margin(length.em 1, length.em 0)
            style.marginBottom 10
            style.marginBottom (length.em 1)
            style.boxShadow(10, 10, color.black)
            style.boxShadow(10, 10, 10, color.black)
            style.boxShadow(0, 0, 10, color.black)
            style.boxShadow(0, 0, 10, 10, color.darkGray)
            style.boxShadow.none
            style.height length.auto
            style.borderRadius 20
            style.borderRadius (length.rem 10)
            style.margin 10
            style.backgroundRepeat.repeatX
            style.backgroundPosition.fixedNoScroll
            style.margin (length.px 10)
            style.margin(10, 10, 10, 20)
            style.margin(10, 10, 10)
            style.margin(10, 10)
            style.width 10
            style.height 100
            style.height (length.vh 50)
            style.height (length.percent 100)
            style.backgroundColor.fuchsia
            style.backgroundColor "#FFFFFF"
            style.border(3, borderStyle.dashed, color.crimson)
            style.borderColor.blue
            style.transform.scale3D(20, 20, 20)
            style.transform.translateX(100)
            style.transform.translateY(100)
            style.transform.translateZ(100)
            style.textTransform.capitalize
            style.textTransform.lowercase
            style.fontStretch.extraCondensed
            style.fontVariant.smallCaps
            style.fontStyle.italic
            style.fontSize 20
            style.fontSize (length.em 2)
            style.color.crimson
            style.color "#000000"
        ]
    ]

```

--------------------------------

### Install pigeon-maps npm Dependency

Source: https://github.com/zaid-ajaj/feliz/blob/master/public/PigeonMaps/Installation.md

This snippet demonstrates how to install the pigeon-maps npm dependency using npm. This is a required step for projects that use the JavaScript pigeon-maps library.

```javascript
npm install --save-dev pigeon-maps
```

--------------------------------

### Basic Dropdown Example

Source: https://github.com/zaid-ajaj/feliz/blob/master/public/SelectSearch/README.md

Demonstrates a basic dropdown using Feliz.SelectSearch. It allows users to select a single language from a predefined list and displays the selected value.

```fsharp
open Feliz
open Feliz.SelectSearch

[<ReactComponent>]
let BasicDropdown() =
    let (selectedValue, setSelectedValue) = React.useState<string option>(None)
    Html.div [
        prop.style [ style.width 400 ]
        prop.children [
            SelectSearch.selectSearch [
                selectSearch.placeholder "Select a language"
                selectSearch.onChange (fun value -> setSelectedValue(Some value))
                selectSearch.options [
                    { value = "en-GB"; name = "English"; disabled = false }
                    { value = "fr-FR"; name = "French"; disabled = false }
                    { value = "nl-NL"; name = "Dutch"; disabled = false }
                ]
            ]

            match selectedValue with
            | None -> Html.h3 "No value selected"
            | Some value -> Html.h3 (sprintf "Selected value '%s'" value)
        ]
    ]
```

--------------------------------

### Simple Delay Example

Source: https://github.com/zaid-ajaj/feliz/blob/master/public/Feliz.Delay/Index.md

Demonstrates the basic usage of React.delay to delay the rendering of its children by a specified time. The fallback is set to Html.none by default.

```fsharp
open Feliz
open Feliz.Delay

[<ReactComponent>]
let UseDelayExample() =
    React.delay [
        delay.waitFor 2000

        delay.children [
            Html.text "Here I am!"
        ]
    ]
```

--------------------------------

### Basic Code Splitting Example

Source: https://github.com/zaid-ajaj/feliz/blob/master/public/Feliz/React/CodeSplitting.md

Demonstrates dynamic import of a component using React.lazy and a placeholder with React.Suspense. The component 'myCodeSplitComponent' is loaded asynchronously.

```fsharp
// CodeSplitting.fs
module CodeSplitting

open Fable.Core.JsInterop
open Feliz

let myCodeSplitComponent = React.functionComponent(fun () ->
    Html.div [
        prop.text "I was loaded asynchronously!"
    ])

exportDefault myCodeSplitComponent

// Example.fs
let myNonCodeSplitComponent = React.functionComponent(fun () ->
    Html.div [
        prop.text "I was loaded synchronously!"
    ])

let centeredSpinner =
    Html.div [
        prop.style [
            style.textAlign.center
            style.marginLeft length.auto
            style.marginRight length.auto
            style.marginTop 50
        ]
        prop.children [
            Html.li [
                prop.className [
                    FA.Fa
                    FA.FaRefresh
                    FA.FaSpin
                    FA.Fa3X
                ]
            ]
        ]
    ]

let asyncComponent : JS.Promise<unit -> ReactElement> = JsInterop.importDynamic "./CodeSplitting.fs"

let codeSplitting = React.functionComponent(fun () ->
    Html.div [
        prop.children [
            myNonCodeSplitComponent()
            React.suspense([ 
                Html.div [
                    React.lazy'(asyncComponent,())
                ]
            ], centeredSpinner)
        ]
    ])
```

--------------------------------

### UseResponsive Example with Custom Breakpoints

Source: https://github.com/zaid-ajaj/feliz/blob/master/public/Feliz.UseMediaQuery/Index.md

Illustrates how to use the UseResponsive hook with custom breakpoint values. You can define your own pixel widths for different screen sizes.

```fsharp
[<ReactComponent>]
let UseResponsiveCustomBreakpointsExample() =
    let customBreakpoints = {
        MobileLandscape = 600
        Tablet = 960
        Desktop = 1280
        WideScreen = 1920
    }

    let width = React.useResponsive(customBreakpoints)

    Html.div [
        let text =
            match width with
            | ScreenSize.Mobile -> "Mobile"
            | ScreenSize.MobileLandscape -> "MobileLandscape"
            | ScreenSize.Tablet -> "Tablet"
            | ScreenSize.Desktop -> "Desktop"
            | ScreenSize.WideScreen -> "WideScreen"
        prop.children [
            Html.h1 text
            Html.p "Resize your screen to get the media query hook to re-render the component with updated information."
        ]
    ]
```

--------------------------------

### Customized Search Predicate in Dropdown

Source: https://github.com/zaid-ajaj/feliz/blob/master/public/SelectSearch/README.md

Allows for custom filtering logic in the searchable dropdown. The `selectSearch.filterOptions` attribute accepts a function to define how options are filtered based on user input, for example, to exclude disabled items or match based on the start of the name.

```fsharp
SelectSearch.selectSearch [
    selectSearch.placeholder "Select a language"
    selectSearch.search true
    selectSearch.onChange (fun value -> setSelectedValue(Some value))
    selectSearch.filterOptions (fun item searchQuery -> not item.disabled && item.name.StartsWith searchQuery)
    selectSearch.options [
        { value = "en-GB"; name = "English"; disabled = true }
        { value = "fr-FR"; name = "French"; disabled = false }
        { value = "nl-NL"; name = "Dutch"; disabled = false }
    ]
]
```

--------------------------------

### React.useDeferredParallel Example

Source: https://github.com/zaid-ajaj/feliz/blob/master/public/Feliz.UseDeferred/Index.md

Demonstrates how to use React.useDeferredParallel to load multiple items in parallel, with each item's loading state managed individually. It shows handling different states like not started, in progress, failed, and resolved for both the initial ID fetching and the subsequent item loading.

```fsharp
[<ReactComponent>]
let ParallelDeferred() =
    let loadIds = async {
        do! Async.Sleep 1000
        return [ 1 .. 5 ]
    }

    let loadItem itemId = async {
        do! Async.Sleep (itemId * 1000)
        return sprintf "Loaded item %d" itemId
    }

    let itemIds = React.useDeferred(loadIds, [|  |])

    let items = React.useDeferredParallel(itemIds, fun ids -> [ for itemId in ids -> itemId, loadItem itemId ])

    match itemIds with
    | Deferred.HasNotStartedYet -> Html.none
    | Deferred.InProgress -> Html.i [ prop.className [ "fa"; "fa-refresh"; "fa-spin"; "fa-2x" ] ]
    | Deferred.Failed error -> Html.h1 "oops"
    | Deferred.Resolved ids ->
        Html.ul [
            for (id, item) in items ->
            React.keyedFragment(id, [
                match item with
                | Deferred.HasNotStartedYet -> Html.none
                | Deferred.InProgress -> Html.li [ Html.i [ prop.className [ "fa"; "fa-refresh"; "fa-spin" ] ] ]
                | Deferred.Failed error -> Html.h1 "Oops"
                | Deferred.Resolved item -> Html.li item
            ])
        ]
```

--------------------------------

### Install Recharts npm Dependency

Source: https://github.com/zaid-ajaj/feliz/blob/master/public/Recharts/Installation.md

Installs the 'recharts' npm package, a required dependency for Feliz.Recharts.

```bash
npm install recharts@2.0.9
```

--------------------------------

### Build for Production

Source: https://github.com/zaid-ajaj/feliz/blob/master/Feliz.Template/Content/README.md

Builds the application for production, placing generated files into the 'deploy' directory.

```bash
npm run build
```

--------------------------------

### Feliz RoughViz Pie Chart Example

Source: https://github.com/zaid-ajaj/feliz/blob/master/public/RoughViz/Index.md

Demonstrates how to generate a pie chart using Feliz.RoughViz with sample fruit sales data. It includes options for title, data, roughness, fill style, and highlight color.

```fsharp
open Feliz
open Feliz.RoughViz

let fruitSales = [
    ("Oranges", 5.0)
    ("Apples", 8.2)
    ("Strawberry", 10.0)
    ("Peach", 2.0)
    ("Pineapple", 17.0)
    ("Bananas", 10.0)
    ("Mango", 6.4)
]

let roughPieChart = React.functionComponent(fun () ->
    RoughViz.pieChart [
        pieChart.title "Fruit Sales"
        pieChart.data fruitSales
        pieChart.roughness 3
        pieChart.fillStyle.crossHatch
        pieChart.highlight color.lightGreen
    ])
```

--------------------------------

### Multiple State Variables Example

Source: https://github.com/zaid-ajaj/feliz/blob/master/public/Feliz/React/StatefulComponents.md

Illustrates how a single component can manage multiple independent state variables using multiple calls to React.useState. This example includes a counter and a text color state.

```fsharp
[<ReactComponent>]
let MultipleVariables() =
    let (count, setCount) = React.useState(0)
    let (textColor, setTextColor) = React.useState(color.red)

    Html.div [
        Html.h1 [
            prop.style [ style.color textColor ]
            prop.text count
        ]

        Html.button [
            prop.text "Increment"
            prop.onClick (fun _ -> setCount(count + 1))
        ]

        Html.button [
            prop.text "Red"
            prop.onClick (fun _ -> setTextColor(color.red))
        ]

        Html.button [
            prop.text "Blue"
            prop.onClick (fun _ -> setTextColor(color.blue))
        ]
    ]
```

--------------------------------

### Basic Feliz Element Rendering

Source: https://github.com/zaid-ajaj/feliz/blob/master/public/Feliz/Syntax.md

Demonstrates how to render basic HTML elements like h1, div, and ul with text or nested elements in Feliz.

```fs
Html.h1 42

Html.div "Hello there!"

Html.div [ Html.h1 "So lightweight" ]

Html.ul [
  Html.li "One"
  Html.li [ Html.strong "Two" ]
  Html.li [ Html.em "Three" ]
]
```

--------------------------------

### Feliz.Recharts Area Chart Example

Source: https://github.com/zaid-ajaj/feliz/blob/master/public/Recharts/README.md

This F# code demonstrates how to create a Recharts area chart using Feliz bindings. It defines data, creates linear gradients for fills, and configures the chart with axes, tooltips, and grid lines. The example showcases the type-safe and discoverable nature of the Feliz bindings.

```fsharp
open Feliz
open Feliz.Recharts

type Point = { name: string; uv: int; pv: int }

let data = [
    { name = "Page A"; uv = 4000; pv = 2400 }
    { name = "Page B"; uv = 3000; pv = 1398 }
    { name = "Page C"; uv = 2000; pv = 9800 }
    { name = "Page D"; uv = 2780; pv = 3908 }
    { name = "Page E"; uv = 1890; pv = 4800 }
    { name = "Page F"; uv = 2390; pv = 3800 }
    { name = "Page G"; uv = 3490; pv = 4300 }
]

let createGradient (id: string) color =
    Svg.linearGradient [
        svg.id id
        svg.x1 0; svg.x2 0
        svg.y1 0; svg.y2 1
        svg.children [
            Svg.stop [
                svg.offset(length.percent 5)
                svg.stopColor color
                svg.stopOpacity 0.8
            ]
            Svg.stop [
                svg.offset(length.percent 95)
                svg.stopColor color
                svg.stopOpacity 0.0
            ]
        ]
    ]

[<ReactComponent>]
let SampleChart() =
    Recharts.areaChart [
        areaChart.width 730
        areaChart.height 250
        areaChart.data data
        areaChart.margin(top=10, right=30)
        areaChart.children [
            Html.defs [
                createGradient "colorUv" "#8884d8"
                createGradient "colorPv" "#82ca9d"
            ]
            Recharts.xAxis [ xAxis.dataKey (fun point -> point.name) ]
            Recharts.yAxis [ ]
            Recharts.tooltip [ ]
            Recharts.cartesianGrid [ cartesianGrid.strokeDasharray(3, 3) ]

            Recharts.area [
                area.monotone
                area.dataKey (fun point -> point.uv)
                area.stroke "#8884d8"
                area.fillOpacity 1
                area.fill "url(#colorUv)"
            ]

            Recharts.area [
                area.monotone
                area.dataKey (fun point -> point.pv)
                area.stroke "#82ca9d"
                area.fillOpacity 1
                area.fill "url(#colorPv)"
            ]
        ]
    ]

open Browser.Dom

ReactDOM.render(SampleChart(), document.getElementById "root")
```

--------------------------------

### Synchronized Area Charts with Feliz.Recharts

Source: https://github.com/zaid-ajaj/feliz/blob/master/public/Recharts/AreaCharts/SynchronizedAreaChart.md

This F# code defines a React component using Feliz.Recharts to render two synchronized Area Charts. It includes sample data, chart dimensions, axis configurations, tooltips, and synchronized IDs to link the charts. The example demonstrates how to use `areaChart`, `cartesianGrid`, `xAxis`, `yAxis`, `tooltip`, and `area` components.

```fsharp
module App

open Feliz
open Feliz.Recharts

type Point = { name: string; uv: int; pv: int }

let data = [
    { name = "Page A"; uv = 4000; pv = 2400 }
    { name = "Page B"; uv = 3000; pv = 1398 }
    { name = "Page C"; uv = 2000; pv = 9800 }
    { name = "Page D"; uv = 2780; pv = 3908 }
    { name = "Page E"; uv = 1890; pv = 4800 }
    { name = "Page F"; uv = 2390; pv = 3800 }
    { name = "Page G"; uv = 3490; pv = 4300 }
]

[<ReactComponent>]
let Chart() =
    Html.div [
        Html.h4 "A demo of synchronized AreaCharts"
        Recharts.areaChart [
            areaChart.width 500
            areaChart.height 200
            areaChart.data data
            areaChart.syncId "anyId"
            areaChart.margin(top=10, right=30)
            areaChart.children [
                Recharts.cartesianGrid [ cartesianGrid.strokeDasharray(3, 3) ]
                Recharts.xAxis [ xAxis.dataKey (fun point -> point.name) ]
                Recharts.yAxis [ ]
                Recharts.tooltip [ ]
                Recharts.area [
                    area.monotone
                    area.dataKey (fun point -> point.uv)
                    area.stroke "#8884d8"
                    area.fill "#8884d8"
                ]
            ]
        ]

        Html.p "Maybe some other content"

        Recharts.areaChart [
            areaChart.width 500
            areaChart.height 200
            areaChart.data data
            areaChart.syncId "anyId"
            areaChart.margin(top=10, right=30)
            areaChart.children [
                Recharts.cartesianGrid [ cartesianGrid.strokeDasharray(3, 3) ]
                Recharts.xAxis [ xAxis.dataKey (fun point -> point.name) ]
                Recharts.yAxis [ ]
                Recharts.tooltip [ ]
                Recharts.area [
                    area.monotone
                    area.dataKey (fun point -> point.pv)
                    area.stroke "#82ca9d"
                    area.fill "#82ca9d"
                ]
            ]
        ]
    ]

open Browser.Dom

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

```

--------------------------------

### Feliz Form Inputs

Source: https://github.com/zaid-ajaj/feliz/blob/master/public/Feliz/Syntax.md

Illustrates how to create form input elements in Feliz, including handling state, onChange events for different input types (text, checkbox), and type properties.

```fs
Html.input [
    prop.className "input"
    prop.value state.Crendentials.Password // string
    prop.onChange (SetPassword >> dispatch) // (string -> unit)
    prop.type'.password
]

Html.input [
    prop.className "input checkbox"
    prop.value state.RememberMe // boolean
    prop.onChange (SetRememberMe >> dispatch) // (bool -> unit)
    prop.type'.checkbox
]
```

--------------------------------

### Basic Popover Usage in F#

Source: https://github.com/zaid-ajaj/feliz/blob/master/public/Popover/README.md

Demonstrates how to use the Feliz.Popover component in an Elmish application. It shows how to manage the popover's open/closed state using React.useState and how to customize its appearance and behavior.

```fsharp
open Feliz
open Feliz.Popover

let popoverWithText' = React.functionComponent(fun (input: {| content: string |}) ->
    let (popoverOpen, toggleOpen) = React.useState false
    Popover.popover [
        popover.body [
            // the body is the content of the pop over when it is opened
            Html.div [
                prop.text input.content
                prop.style [
                    style.backgroundColor.white
                    style.padding 20
                    style.borderRadius 10
                    style.boxShadow(0, 0, 10, color.black)
                ]
            ]
        ]
        popover.isOpen popoverOpen
        popover.place.above
        popover.disableTip
        popover.onOuterAction (fun _ -> toggleOpen(false))
        popover.children [
            /// The content that this popover will orient itself around.
            Html.button [
                prop.text "Open popover"
                prop.onClick (fun _ -> toggleOpen(not popoverOpen))
            ]
        ]
    ])

let sample = Html.div [
    popoverWithText' {| content = "Popover Content" |}
    popoverWithText' {| content = "Another Popover" |
]
```

--------------------------------

### JSX Component Example

Source: https://github.com/zaid-ajaj/feliz/blob/master/public/Feliz/UsingJsx.md

A sample React component written in JSX that accepts a 'title' prop and displays formatted text.

```javascript
import React from "react";

export const About = ({ title }) => {
    return (
        <div style={{ padding: 10 }}>
            <h1>{title}</h1>
            <p>This component is written in JSX and can be easily imported from Feliz applications.</p>
            <p>It accepts parameters or props like <strong style={{ color: "red" }}>title</strong> that come from F#</p>
            <p>You can learn all about Feliz <a href="https://zaid-ajaj.github.io/Feliz">here</a></p>
        </div>
    );
}
```

--------------------------------

### UseMediaQuery Example

Source: https://github.com/zaid-ajaj/feliz/blob/master/public/Feliz.UseMediaQuery/Index.md

Demonstrates how to use the UseMediaQuery hook to conditionally render content based on a media query. It takes a media query string as input and returns a boolean indicating if the query matches.

```fsharp
[<ReactComponent>]
let UseMediaQueryExample() =
    let matches = React.useMediaQuery("(max-width: 850px)")
    Html.div [
        let text =
            if matches then
                "850px or less"
            else
                "More than 850px"

        prop.children [
            Html.h1 text
            Html.p "Resize your screen to get the media query hook to re-render the component with updated information."
        ]
    ]
```