z-hello

The z-kit component template, starter point to create z-kit compliant components. The package is intended to be used in a web page.

Table of contents

• z-hello
• Table of contents
• Install
  • Import as HTML/CSS component
  • Import as Stateless Functional Component (SFC)
  • Import as Web Component
• How to use
  • CSS component
  • Stateless Functional Component
  • Web Component
• License

Install

The package is available to download through npm:

npm install z-hello --save

Import as HTML/CSS component

The simple case

The package will be located inside the node_modules folder, you can import it into the HTML document as follows:

<link rel="stylesheet" href="node_modules/z-hello/dist/style.css">

When bundling an web app

For bundlers that support CSS, like Webpack, you can use it like this:

require('z-hello/dist/style.css');

Import as a Stateless Functional Component (SFC)

The package does not include the renderer, you can use any renderer that supports SFCs. You could use React, Preact, Inferno, etc.

Notice: This package contains CSS styling, you may need a bundler that's capable of requiring CSS files like Webpack with css-loader.

Once you have chosen the renderer you can include the package in your project as follows:

// Assuming the React renderer is being used
const React = require('react');
const render = require('react-dom').render;

// Passing the render function when importing
const ZHello = require('z-hello')(React.createElement);

// Render it on page, using JSX here :)
render(<ZHello>Hello!</ZHello>, document.body);

Import as Web Component

You can also import it as a Web Component!

Just add the following line to your HTML file:

<link rel="import" href="node_modules/z-hello/dist/component.html">

Then use it just like a regular HTML tag by the name of z-hello.

How to use

CSS component

Just add the HTML structure and CSS classes to reproduce the UI component.

Class hierarchy

| Recommended HTML tags | Parent | Class | Description | Type | |-----------------------------------------|------------|-------------------|----------------|-----------| | div, section, main, article | root | .z-hello | Root container | Block | | h1, h2, h3, h4, h5, h6 | .z-hello | .z-hello__title | The title | Element |

Full working example:

<div class="z-hello">
  <h1 class="z-hello__title">Hello!</h1>
</div>

Stateless Functional Component

Render the HTML by using the SFC and passing props.

Supported Props

| Prop name | Expected Type | Description | |-------------------------|--------------------|-------------------------| | children | TextNode | The text to render |

Full example (JSX):

<ZHello>Hello!</ZHello>

Web component

Render the component just like any other HTML tag.

Supported attributes

None.

Full example:

<z-hello>Hello!</z-hello>

LICENSE

MIT