With new update in WebAtoms, we can now use functional components along with the Controls. Almost all controls are derived from AtomControl and AtomXFControl for Xamarin Forms. Each of these controls are expensive as they contain heavy logic to perform binding, initialization and disposals. So we have now introduced light weight functional components that basically inlines the JSX nodes inside AtomControl so you can reduce node hierarchy and reuse components easily.

In this tutorial we will display how to use reusable button with font awesome icon and icon + text combination.

Syntax

Function components are defined as shown below.

Attributes

We will declare attributes that we can apply, optional attributes can be declared with ?. Our FAButton component will render button with a text if we specify text attribute.

export interface IFAButton {
    id?: string;
    icon?: string;
    text?: string;
    eventClick?: any;
    href?: string;
    target?: string;
    title?: string;
    styleDisplay?: string;
    class?: string;
    isVisible?: any;
    subClass?: string;
}

CSS

Lets apply little CSS

const css = CSS(
    StyleRule()
    .padding(8)
    .marginLeft(3)
    .marginRight(3)
    .roundBorderFull()
    .display("inline-block")
    .height(40)
    .width(40)
    .defaultBoxShadow()
    .cursor("pointer")
    .backgroundColor(Colors.transparent)
    .hoverBackgroundColor(Colors.lightGreen)
    .and(StyleRule(".pressed")
        .backgroundColor(Colors.lightSteelBlue)
    )
    .child(StyleRule("label.label")
        .display("flex")
        .alignItems("center")
        .child(StyleRule(".fad")
            .fontSize(18)
            .width("100%")
            .color(Colors.purple.withAlphaPercent(0.5))
            .cursor("pointer")
            .and(StyleRule(".red")
                .color(Colors.red)
            )
        )
    )
);

Component

We will now declare the actual component as a function.

export default function FAButton({
    id, icon, text, eventClick, href,
    target, title, styleDisplay,
    class: className, subClass
}: IFAButton) {

    const cn = className ?? ( subClass
        ? subClass + " " + css
        : css
    );

    if (href) {
            return <a id={id}
                class={cn}
                target={target}
                title={title}
                styleDisplay={styleDisplay}
                >
                <label class="label">
                    <i class={icon}/>
                    { text && <span text={text}/> }
                </label>
            </a>;
    }
    return <button id={id} class={cn} eventClick={eventClick}
             title={title} styleDisplay={styleDisplay}>
            <label class="label">
                <i class={icon}/>
                { text && <span text={text}/> }
            </label>
        </button>;
}

FAButton.className = css;

Usage

Display a link with only an icon…

     <FAButton icon="fad fa-play" 
           href="https://www.webatoms.in/play"/>

Display a link with only an icon and a text …

     <FAButton text="Play"
              icon="fad fa-play" 
              href="https://www.webatoms.in/play"/>

Display a button with a click event

     <FAButton text="Play"
              icon="fad fa-play"
              eventClick={clickEventHandler}/>

Advantages

1. Functional components basically acts as a macro and expands JSX nodes inside parent Atom control.

2. Increases reusability. You can also use binding however, binding can only be applied to the attributes of basic elements.

3. Functional components are expanded in class constructor, you cannot use binding syntax inside functional components.

4. Bindings applied on attributes will be copied as it is to final nodes, they will not cause logic of functional component to be reevaluated.