ghost-portal/packages/ui-api
Jaco Greeff 3ff2053370
Bring tabs into apps without (consistency) (#659)
* Bring tabs into apps without (consistency)

* Small signer updates

* Explorer info as label

* Adjust fonts for modals

* Cleanup imports

* .ui.modal base color

* Adjust Account summary opacity

* Bump API (metadata V1 events)

* Update Event.tsx

* Remove order overrides

* Expand isDisabled balance

* Update index.tsx

* Update index.tsx
2019-01-28 20:30:49 +01:00
..
src Basic info display for 123-code (#641) 2019-01-27 12:50:47 +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 Bring tabs into apps without (consistency) (#659) 2019-01-28 20:30:49 +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')
);
...