Qia-widgets NPM

Introduction

Web widgets powered by web components and React, published as UMD modules

Documentation is available at https://github.johannhuang.com/Qia-Web-Widgets/.

On 20211016, version 4 is published.

APIs

JavaScript Constructors

class QiaMarkDownText (containerElement: HTMLElement, optionsObject? : { readOnly?: boolean; canFullScreen?: boolean } = {})
class QiaPaginator (containerElement, optionsObject = { current, total })
class QiaSkeleton (containerElement)

HTML Custom Elements

<qia-paginator current="" total=""></qia-paginator> * class QiaPaginator.HTMLElement extends HTMLElement
<qia-skeleton></qia-skeleton> * class QiaSkeleton.HTMLElement extends HTMLElement

React Components

class QiaPaginator.ReactComponent extends React.Component (props = { current, total, onPageChange?, onPageChanged? })
class QiaSkeleton.ReactComponent extends React.Component ()

Installation

Download files from GitHub or find links on CDN such as UNPKG.com, and then import as HTML scirpts
npm install qia-widgets from https://www.npmjs.com/package/qia-widgets

Quickstart - Step by Step

include React and ReactDOM

<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>

include Qia.Widgets

for all available widgets as HTML scripts

<script src="$base_url/qia.widgets.js" crossorigin></script>
<!-- .widgets is the namespace just like .audio is the namespace for audio-player; web components are named without widgets in-between, such as qia-paginator -->

for just the widgets needed as HTML scripts

<script src="node_modules/qia-widgets/qia-skeleton.js"></script>

for all available widgets in JavaScript with a bare module resolver

import QiaWidgets from 'qia-widgets'
const QiaSkeleton = QiaWidgets.Skeleton

for just the widgets needed in JavaScript with a bare module resolver

import QiaSkeleton from 'qia-widgets/qia-skeleton'

use QiaWidgets

<qia-skeleton></qia-skeleton>

or using JavaScript to construct and mount

const qiaSkeletonContainer = document.createElement('div')
const qiaSkeleton = new QiaSkeleton({}, qiaSkeletonContainer)

document.body.appendChild(qiaSkeletonContainer)

or JSX or React.createElement() in React

const QiaSkeletonReactComponent = QiaSkeleton.ReactComponent

React.createElement(QiaSkeletonReactComponent)

<QiaSkeletonReactComponent />

Quickstart - Examples

Qia-Web-Widgets--Quickstart: https://github.com/johannhuang/Qia-Web-Widgets--Quickstart
Qia-Web-Widgets--Quickstart--React: https://github.com/johannhuang/Qia-Web-Widgets--Quickstart--React
Qia-Web-Widgets--Quickstart--Angular: https://github.com/johannhuang/Qia-Web-Widgets--Quickstart--Angular

Dependencies

QiaSkeleton, QiaPaginator * React and ReactDOM (They are not bundled in the module.)
QiaMarkDownText Font Awesome (It is not bundled in the module.) SimpleMDE (It is bundled in the module.)