/qia-web-widgets

A collection of web widgets developed in React.js and published as web components

Primary LanguageJavaScript

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

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

Quickstart - Step by Step

  1. 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>
  1. 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'
  1. 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

Dependencies

  • QiaSkeleton, QiaPaginator
    • React and ReactDOM (They are not bundled in the module.)
  • QiaMarkDownText