kapsule

Kapsule

A Simple Web Component library, inspired by the reusable charts pattern commonly found in D3 components.

Quick start

import Kapsule from 'kapsule';

or

var Kapsule = require('kapsule');

or even

<script src="//unpkg.com/kapsule/dist/kapsule.min.js"></script>

Usage example

Define the component

const ColoredText = Kapsule({
    
    props: {
        color: { defaultVal: 'red' },
        text: {}
    },
    
    init: (domElement, state) => {
        state.elem = document.createElement('span');
        domElement.appendChild(state.elem);
    },
    
    update: state => {
        state.elem.style.color = state.color;
        state.elem.textContent = state.text;
    }

});

Instantiate the component

let myText = ColoredText();

Render

myText(<myDOMElement>)
    .color('blue')
    .text('foo');

How to build

npm install
npm run build