Custom Components
Creating your own components using Weblabs
So far, we learned how to create simple 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 custom components using other components.
Components from Variables
Weblabs 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) //import { render } from '@weblabsjs/core'
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.
Components from function
A function that will return a Weblabs component in a component function. Your function can do anything inside it's body, or call any function, but it MUST return a WeblabsElement, 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 Weblabs, so you can use any way that suites you, but make sure your function returns a Weblabs 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 Weblabs.
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 = name.id("hello")
render("app", name)
And for functional component:
function MyComponent(name, age) {
return div(
p(`Name: ${name}`),
p(`Age: ${age}`)
)
}
render("app", MyComponent("Mayukh", 17).id("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 Weblabs does not binds any strict rule except as mentioned above.
Last updated
Was this helpful?