Custom Components

Creating your own components using Bolt

So far, we learned how to create native components, how to nest them and how to add properties and events to them. In this page, we will learn how to create our very own components using other components.

Components from Variables

Bolt components can be normal variables, that will store some combination of other components, which can also have custom nested components.

Let's say I have some component that shows some name of user and their age

var name = div(
    p("Name: Mayukh"),
    p("Age: 17")
)

Here I created this variable, now I can use this variable directly into other components as their children or in the render function

render("app", name)

Now, you can also use variables inside the declaration of your custom components, like this:

let name = "Maykh"
let age = 17
var component = div(
    p(`Name: ${name}`),
    p(`Age: ${age}`)
)

render("app", component)

This means you can have nested functions and variables and it will work just as well.

Note: If a component is using some arbitary variable, and that variable was updated, then the state of the UI will not change, i.e the changes will not be shown to the UI. For this, we will need to use states that we will learn in Reactivity

Components from function

A function that will return a bolt component is a component function. Your function can do anything inside it's body, or call any function, but it MUST return a HTMLDocument, and it must not be an async function, since async function returns Promise object.

There is no hard rule for creating a functional component in Bolt as mentioned above, so you can use any way that suites you, but make sure your function returns a Bolt component, or another functional component.

function MyComponent() {
    return p("Hello from function MyComponent!")
}

render("app", MyComponent())

Receiving custom props in functional component

Your functional component can accept any type of props, and they can be of any type, and it's upto you how you manage them and return a valid bolt component. Let's see a simple example:

function ShowUserDetails(name, age) {
    return div(
        p(`Name: ${name}`),
        p(`Age: ${age}`)
    )
}

render("app", ShowUserDetails("Mayukh", 17))

Higher Order Components

All the custom components that you make are 100% compatible with any higher order components that are provided by Bolt.

That means you can assign ids, events, classes and other things to a custom components, be it variable component or functional component, and it will have the exact same effect.

Let's see some examples:

var name = div(
    p("Name: Mayukh"),
    p("Age: 17")
)

//the id of the name component is now hello
name = id(name, "hello") 
render("app", name)

And for functional component:

function MyComponent(name, age) {
    return div(
        p(`Name: ${name}`),
        p(`Age: ${age}`)
    )
}

render("app", id(MyComponent("Mayukh", 17), "hello") //same effect

Nesting components

Now that we saw how to create custom components, with approaches like functional components and variable components, we can now get to create nested components.

function ShowUserDetails(name, age) {
    return div(
        p(`Name: ${name}`),
        p(`Age: ${age}`)
    )
}

var dashboard = div(
    p("Welcome to dashboard!"),
    p("User Details: "),
    ShowUserDetails("Mayukh", 17)
)

render("app", dashboard)

We can do it other way around as well. This opens up several option for developers to create interesting patterns in their applications, unique to themselves since Bolt does not binds any strict rule except as mentioned above.