ghost-portal/packages/ui-api
Jaco Greeff 96615d5957
Bump UI, HDKD keyring (new substrate crypto) (#813)
* Bump UI, HDKD keyring (new substrate crypto)

* Bump ui/* versions

* Pull in latest util-crypto, bp39 fix

* Bump common

* Small enhancements, cleanups (testing WIP)

* Bump

* Update after merge

* Bumps, fix transfer calculation (value may be non-existent)

* Bumpo dependencies

* Label extrinsic hash

* Signature updates

* Update deps

* Adjust status display

* Close status items on click

* Update withRouter duplication

* API bump, (some) creation fixes

* Move bip39 out of the worker (fast enough now via WASM)

* Update after master merge

* Cleanup deps (re-write yarn.lock)
2019-03-20 17:06:29 +01:00
..
src Bump UI, HDKD keyring (new substrate crypto) (#813) 2019-03-20 17:06:29 +01:00
test Split ui-api, update API version (#589) 2019-01-12 09:38:07 +01:00
LICENSE Split ui-api, update API version (#589) 2019-01-12 09:38:07 +01:00
package.json Bump UI, HDKD keyring (new substrate crypto) (#813) 2019-03-20 17:06:29 +01:00
README.md Split ui-api, update API version (#589) 2019-01-12 09:38:07 +01:00
webpack.config.js Split ui-api, update API version (#589) 2019-01-12 09:38:07 +01:00

@polkadot/ui-reactive

A collection of RxJS enabled React components that operate with the @polkadot/api-rx library. It automatically manages subscriptions on behalf of the developer, providing a number of unstyled components that can be used to construct UIs.

usage

Basic usage entails creating a ContextProvider and just using the components. For instance, to display the current node time,

import React from 'react';
import ReactDOM from 'react-dom';

import { Api, NodeTime } from '@polkadot/ui-reactive';

...
ReactDOM.render(
  <Api>
    <NodeTime />
  </Api>,
  document.querySelector('#container')
);
...

All components are provided unstyled making no assumptions on the actual use, however they all support (optionally) the label, className and style attributes, that can be used to style to component.

...
ReactDOM.render(
  <Api>
    <NodeTime className='rx-time' label='current node time:' />
  </Api>,
  document.querySelector('#container')
);
...