component-js v1.0.8

Create web page by Javascript

Introduction

component-js is a light weight library to create a web page by Javascript, it's philosophy component just a function return DOM element let us could flexibility compose component for create a new component.

You may need component-js when ...

1. Client-render, sometimes, you need client-render data to DOM element. Traditional way is splicing HTML string or using HTML template engine. However splicing HTML string is easy to wrong and using HTML template is too heavy. So component-js is a good way for you.

2. HTML component, component-js provider a flexible way to compose component. Although many framework do it excellently, but maybe you just need a simple way to reuse HTML rather than a giant.

How to use

npm install component-js

Hello world!

import {elm,txNode,comp} from 'component-js'
document.getElementById('root')
    .appendChild(elm({
                   		tag:'p',
                   		attr:{
                   			textContent:'hello world!'
                   		}
                   }))

Or more exciting

import {elm, comp, txNode} from 'component-js'
import j from 'berserk'

const el = comp.div(
	[
		comp.listGroup(
			[
				comp.div(
					[
						comp.btn({
							evtLir: [
								{
									type: 'click',
									handler: () => j.log('click first btn')
								}
							],
							txt: 'add TODO'
						}),
						comp.btn({
							evtLir: [
								{
									type: 'click',
									handler: () => j.log('click second btn')
								}
							],
							txt: 'show active'
						}),
						comp.btn(
							{
								evtLir: [
									{
										type: 'click',
										handler: () => j.log('click second btn')
									}
								],
								txt: 'show active'
							}
						)
					]
				),
				txNode('dynamic')
			]
		)
	]
)
document.getElementById('root').appendChild(el)

Element api

Constants

elm ⇒ createElement

Create a DOM element by pass option

Kind: global constant
Returns: createElement - a DOM element

Example

elm({
		tag:'p',
		attr:{
			textContent:'hello world!'
		}
})

txNode ⇒ createTextNode

A function for create a textNode by pass text content, like document.createTextNode but bind 'document' as it's this

Kind: global constant
Returns: createTextNode - A textNode

Example

import {comp,txNode} from 'component-js'
comp.div(
   [
       txNode('hello world!')
   ]
)

Component api

Note: component-js component is depend on bootstrap

Functions

btn(option) ⇒ createElement

Create a button element with bootstrap className

Kind: global function
Returns: createElement - A button element with bootstrap@4.x className

Example

btn({
	evtLir: [
				{
					type: 'click',
					handler: () => j.log('click second btn')
				}
			],
	txt: 'show active'
	})

listGroup(children) ⇒ createElement

Create a bootstrap listGroup by pass children element

Kind: global function

Example

listGroup([buttonElm1,buttonElm2])

form(formGroups, submitBtn, opt) ⇒ createElement

Create a div with form by pass option, fromGroups(see bootstrap),submit button

Kind: global function
Returns: createElement - A form element with bootstrap style

Example

form(
       [
           formGroupDiv1,
           formGroupDiv1,
       ],
       submitBtn
)

formGroup(label, type) ⇒ createElement

Create a div with bootstrap 'formGroup' className for input

Kind: global function
Returns: createElement - A div element which has label and input element children as well as bootstrap 'formGroup' className

Example

formGroup(
       'password',
       'password'
)

div(children) ⇒ createElement

Create a div by pass it's children elements

Kind: global function
Returns: createElement - A div element

Example

div(
   [childElm1,childElm2]
)