Blue-web-components NPM

Blue Web Components

This library provides different kind of Web Components. What are Web Components?

Goal is to make the components simple, independent and flexible to use.

If you are using React, Blue React might be a good libary of producitve components.

Usage

Install as NPM package

Install from NPM:

npm i blue-web-components

Install from GitHub repository:

npm i github:bruegmann/blue-web-components

Import it in your code:

import { Sidebar } from "blue-web-components/packages/sidebar/Sidebar.js"
import "blue-web-components/packages/sidebar/Sidebar.js"

TypeScript support is not all that great yet, but you can declare it anyway. In a React app with TypeScript import it and declare it once globally:

import { DOMAttributes } from "react"

// @ts-ignore
import { Sidebar } from "blue-web-components/packages/sidebar/Sidebar.js"
import "blue-web-components/packages/sidebar/Sidebar.js"

type CustomElement<T> = Partial<T & DOMAttributes<T> & { children: any }>

declare global {
    namespace JSX {
        interface IntrinsicElements {
            ["blue-sidebar"]: CustomElement<Sidebar>
        }
    }
}

Embedding directly to HTML

<script
    type="module"
    src="https://raw.githubusercontent.com/bruegmann/blue-web-components/main/packages/sidebar/Sidebar.js"
></script>

Use a Blue Web Component

<blue-sidebar></blue-sidebar>

Web Components support different attributes, properties and events. Take a look at the docs to find out more.

Styling

By default the Web Components have pretty basic styling. You can customize it using CSS Variables (Custom Properties). All CSS Variables by Blue Web Components start with --blue-.