History

Jaco Greeff a8ed300dc4 Small init changes (static state) (#663 ) * Small init changes (static state) * Hide vanity on empty accounts * Require accounts for apps, cleanup needsApi/needsCalls * Display InputAddress when disable (but no options) * Filter toolbox based on accounts * Accounts gated via app, don't display add * Cleanup linting * Validation display & clear on settings types * Split save for developer & general * Add Reset button to dev settings		2019-01-31 18:02:47 +01:00
..
src	Small init changes (static state) (#663 )	2019-01-31 18:02: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	[CI Skip] 0.22.57	2019-01-30 21:20:46 +00: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

README.md

@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')
);
...