@zooplus/zoo-web-components

    10.3.1 • Public • Published

    Zoo Web Components

    Dependencies
    David
    David
    • 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

    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.

    Install

    npm i @zooplus/zoo-web-components

    DownloadsWeekly Downloads

    66

    Version

    10.3.1

    License

    MIT

    Unpacked Size

    256 kB

    Total Files

    81

    Last publish

    Collaborators

    • dwolanind
    • yuriykravets
    • bartlech
    • ziaber