New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More

kapsule

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

kapsule

A Simple Web Component library


Version published
Maintainers
1
Created
Issues
1

Kapsule

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

NPM

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: { default: '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

FAQs

Package last updated on 07 Aug 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts