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-.

Development

Use this command to run the site on a simple web server:

npm start

This will start Storybook.

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

Credits

• SVG code for ThreeStateCheckbox by Bootstrap Icons

License

GNU General Public License v3.0