@zooplus/zoo-web-components

Zoo Web Components

Dependencies

• Set of extendable, reusable web-components which can be used in any modern UI framework (or without any).
• 0 dependencies, built with Vanilla JS
• Doesn't hide native HTML elements behind multiple levels of abstraction but rather enhances them via composition.

Installation

To use this library install it by running:

npm i @zooplus/zoo-web-components --save

When there is a tree-shaking mechanism in your build pipeline, you can import only the components that you need, for example:

import { Input, Select, registerComponents } from '@zooplus/zoo-web-components';
registerComponents(Input, Select);

// or to import everything

import * as zooComponents from  '@zooplus/zoo-web-components';
zooComponents.registerComponents(zooComponents);

All dependencies needed by the components should be pulled automatically, so you don't have to worry about importing classes for zoo-info, zoo-label etc.

Your build tool should remove all of the components that are not imported automatically (when using rollup, for example).

In case you don't use any framework and/or any build tool you can import the whole library with the following:

<script src="path-to-zooplus-lib/zoo-web-components.js"></script>

or only the components that you need, for example:

<script src="path-to-zooplus-lib/checkbox.js"></script>

Note, that IIFE components already include all sub-dependencies needed by the component. For example, the above zoo-checkbox requires also a zoo-info component, it is already in the same bundle as the checkbox. Other components that might also use zoo-info will not throw an error, since care is taken to not redefine same elements in the custom elements registry.

Currently, we recommend to use ESM bundle only when you're using some kind of a bundler, which transforms your code into some js module format that is not ESM, since using pure ESM might trigger FOUC, and we do not want that.

Remember to add CSS custom properties to your main styles file:

:root {
 --primary-mid: #3C9700;
 --primary-light: #66B100;
 --primary-dark: #286400;
 --primary-ultralight: #EBF4E5;
 --secondary-mid: #FF6200;
 --secondary-light: #F80;
 --secondary-dark: #CC4E00;
 --info-ultralight: #ECF5FA;
 --info-mid: #459FD0;
 --warning-ultralight: #FDE8E9;
 --warning-mid: #ED1C24;
}

Examples integrating with various frameworks

• VueJS
• Angular
• React

Documentation

Landing page is available here: https://zooplus.github.io/zoo-web-components
Documentation page is here: https://zooplus.github.io/zoo-web-components-docs

Note

This library relies on attributes and/or slots. Usage of properties is not supported for simplicity.