@zanichelli/zanichelli-toolbox v0.0.1

Zanichelli Toolbox Web Components Library

Descr

Installation

Download the package by running yarn add @zanichelli/zanichelli-toolbox

or import it in your html using Unpkg o jsDelivr:

// using jsDelivr
<script src="https://cdn.jsdelivr.net/npm/@zanichelli/zanichelli-toolbox/dist/web-components-library/web-components-library.esm.js"></script>

// using unpkg
<script src="https://unpkg.com/@zanichelli/zanichelli-toolbox/dist/web-components-library/web-components-library.esm.js"></script>

Remember to also include the stylesheet:

<link type="text/css" rel="stylesheet" href="https://unpkg.com/@zanichelli/zanichelli-toolbox/www/build/web-components-library.css" />

Using custom elements

import { defineCustomElements as defineToolboxComponents, applyPolyfills } from "@zanichelli/zanichelli-toolbox/loader";

applyPolyfills().then(() => {
  defineAlbeComponents(window);
});

Then use the relative tag as a usual component in your markup.

<section>
  <zt-button>Click me!</zt-button>
</section>

Using React bindings

import React from "react";
import ReactDOM from "react-dom";
import "@zanichelli/zanichelli-toolbox/www/build/web-components-library.css";
import { defineCustomElements as defineToolboxComponents, applyPolyfills } from "@zanichelli/zanichelli-toolbox/loader";
import { ZtButton } from "@zanichelli/zanichelli-toolbox/react";

applyPolyfills().then(() => {
  defineCustomElements(window);
});

ReactDOM.render(<ZtButton>Click me</ZtButton>, document.getElementById("root"));

Development

• Download the repo using git clone git@bitbucket.org:zanichelli/zanichelli-toolbox.git
• In the project's root folder, run yarn
• yarn start to serve develpment http://localhost:3333å