WebComp library monorepo
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
packages
utils
.gitignore
README.md
lerna.json
package.json
yarn.lock

README.md

WebComp

WebComp.js is a "batteries included" JavaScript library for writing smart reusable Web Components in a modern way.

Inspired by React components, WebComp provides familiar state management mechanisms and Virtual DOM, while also providing all of the sweetness of Web Components like Shadow DOM, server side rendering placeholders and ability to render from a string.

Features

  • JSX
  • React-like syntax
  • Virtual DOM
  • Shadow DOM
  • Component and element lifecycle hooks
  • Attribute to props mapping
  • Event based communication
  • State sharing (context)
  • Routing
  • Tiny bundle size

Getting Started

1. Install WebComp

npm install @webcomp/core

2. Import WebComp

import { WebComponent, register } from '@webcomp/core';

3. Create your component

class SuperHeader extends WebComponent {
  render(props) {
    return (
      <div>
        <h1>{props.text}</h1>
        <h3>It's Superpowered!</h3>
      </div>
   );
  }
}

Looks familiar? WebComp components are written in the exact same way as React components.

Note: Because WebComp uses Preact for rendering JSX, props and state are passed as arguments to the render() method for convenient destructuring. You can still use this.props and this.state if you want to, but it's not required.

4. Register your custom tag

register(SuperHeader, 'super-header');

Second argument is an optional tag name. If not set, component name converted to dash-case will be used.

5. Use it!

<div id="main">
  <super-header text="This is not a simple header!"></super-header>
</div>

Documentation

You can read the full documentation here →