Passing props to components

In Feliz you can pass props to components in a similar way as you would in React with JSX. Props are simply function parameters that you define in your component function.

Example

Show code

module Example.PassingProps

open Feliz

[<Fable.Core.Erase>]
type Components =


    [<ReactComponent>]
    static member MyButton(children: ReactElement, onClick: unit -> unit, ?props: IReactProperty list) =
        let props = defaultArg props []
        Html.button [
            prop.style [
                style.backgroundColor.skyBlue
                style.color "white"
                style.padding (8, 12)
                style.textAlign.center
                style.textDecoration.none
                style.display.flex
                style.margin(4,2)
                style.cursor.pointer
            ]
            prop.onClick (fun _ -> onClick())
            prop.children children
            yield! props // same as `...props` in JSX. Can overwrite existing props
        ]


[<ReactComponent(true)>]
let Example() = 
    Html.div [ 
        Components.MyButton(Html.text "Click Me", (fun () -> Browser.Dom.console.log("Button clicked!")))
        Components.MyButton(
            Html.div [
                Html.span "Custom Styled Button"
                Html.i " 🚀"
            ],
            (fun () -> Browser.Dom.console.log("Custom button clicked!")), 
            [ 
                prop.style [ style.backgroundColor.orange; style.fontWeight.bold; style.color.black; style.padding 8 ] 
                prop.title "This is a custom styled button"
            ]
        )

    ]

Passing Children

In JSX syntax you typically pass children between the opening and closing tags of a component.

<MyButton onClick={handleClick}>
    Click Me
</MyButton>

This behavior is mimicked in Feliz by defining a children parameter in your component function. You can then pass the children as an argument when calling the component.

[<ReactComponent(true)>]
let MyButton(children: ReactElement, onClick: unit -> unit, props: IReactProperty list) =
    Html.button [
        prop.style [
            style.padding 10
            style.backgroundColor.lightBlue
            style.borderRadius 5
            style.cursor.pointer
        ]
        prop.onClick (fun _ -> onClick())
        yield! props // same as `...props` in JSX. Can overwrite existing props
        prop.children children
    ]

Spreading props

You can also spread additional props using the yield! syntax inside the prop list. This allows you to pass any number of additional properties to the component, similar to the spread operator (...props) in JSX. Be aware that spreading props can overwrite existing props if there are conflicts.

info

When using prop spreading, be cautious as it can lead to unintended overwrites of existing props, which may cause unexpected behavior in your components.

In a list of properties, the last occurrence of a property takes precedence. Therefore, if you spread props after defining specific properties, the spread props can overwrite those specific properties.

danger

The exception to this rule is the children property. For children the first occurrence takes precedence.

tip

It is recommended to define most arguments explicitly for better type safety and clarity. Use spreading only when necessary.

[<ReactComponent(true)>]
let MyButton(children: ReactElement, props: IReactProperty list) =
    Html.button [
        yield! props // same as `...props` in JSX. Can overwrite existing props
    ]