Properties & Events

Adding Properties and Events

Properties

In previous page, we got to know how to write Bolt Components, and adding children to them. But HTML can do a lot more than that, like adding attributes such as classes and ids.

Bolt can do all those too! but in some unique ways!

Since bolt is a functional framework, i.e everything in Bolt works with functions, we are going to use the concept of Higher Order Components (HOC), where a component takes some child components, and returns the same component with some modifications.

We are going to use the attribute() function to add attributes to any component, but how?

The attribute function takes exactly one element as one argument, and an object with all the properties defined as key value pairs. Let's see an example below:

<p id="paragraph">Hello World</p>

In Bolt, it would look something like this

attribute(
    p("Hello World"),
    {
        id: "paragraph"
    }
)

But it seems like too much work for simply an id! well, we also thought of that and created new functions for attributes that are used a lot, they are:

• id()

• Class()

Let's use them then!

id(
    p("Hello World"),
    "paragraph"
)

Now let's add some classes

Class(
    p("Hello World"),
    "classname1", "classname2"
)

Note: the Class function has the first character capitalized as to differ it from the built in keyword class to avoid clash

But that is not what Bolt is limited to. You can easily combine these functions and add Ids and Classes at the same time

id(
    Class(
        p("Hello World),
        "classname1", "classname2"
    ),
    "paragarph"
)

The order of the function id and Class is not significant, i.e here Class function was used as the argument, but the opposite can be done too and it will still have the same effect

Class(
    id(
        p("Hello World"),
        "paragraph"
    ),
    "classname1", "classname2"
)

Note: do not nest Class or id for the same component. It will not produce any error but the Highest order function will dominate the end result.

Class(
    Class(
        p("Hello World"),
        "classname1"
    ),
    "classname2"
) //the output will have classname2

This does not means you cannot have classes on nested components. Make sure there is no more than one nesting of Class to the same component

Events

Events are one of the most critical part for interactivity. BoltUI uses the same approach as above to make your webapp interactive as the most easy way as possible.

The event() function binds a component to events and callback functions very easily. The event function takes exactly one child and an object with all the events and their callbacks as key-value pairs.

Let's see some example

event(
    button("Click Me"),
    {
        click: () => {
            alert("I was clicked")
        },
        otherevent: () => {
            alert("A custom event")
        }
    }
)

As you can see, we used the click event and a callback function to create an event. You can have multple of such events, and even custom events that you may create which might do something.

To learn about different events, visit: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events

But for small events like those, it will be a waste of code space, and it would look ugly too. You can use event functions directly. They are imported from "bolt-preview-beta/events"

onclick(
    button("click me"),
    () => {
        alert("I was clicked")
    }
)

Those direct event functions are nestable with any other event function, and any other function that takes HTMLElement as input, since it just modifies the component that was given as input, but it is recommended to use just the event function when you have a lot of events, because nesting so many events will cause poor developer experience and hard to debug code.