ghost-portal/packages/ui-react-rx
Jaco Greeff 4484883afc
Basic democracy (Referendum) overview (#216)
* Basic democacry (Referendum) overview

* Summary in-place

* Fix package name

* Proposals & Referendums are showing up

* Some basic Extrinsic formatting. (WIP)

* Basic referendum/proposal summary in place

* Referendum outcome chart

* Voting in place. It works.

* Remove extra console.log/error

* Only show balances as label
2018-08-15 10:35:53 +02:00
..
src Basic democracy (Referendum) overview (#216) 2018-08-15 10:35:53 +02:00
test Copyright project authors (#95) 2018-06-13 22:32:49 +02:00
index.html Include ui-* packages in repo (development speed) (#65) 2018-05-29 17:33:29 +02:00
LICENSE Copyright project authors (#95) 2018-06-13 22:32:49 +02:00
package.json Basic democracy (Referendum) overview (#216) 2018-08-15 10:35:53 +02:00
README.md Include ui-* packages in repo (development speed) (#65) 2018-05-29 17:33:29 +02:00
webpack.config.js Support enumerable accounts (#102) 2018-06-25 18:02:47 +02:00

polkadotjs isc style npm travis maintainability coverage dependency devDependency

@polkadot/ui-react-rx

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-react-rx';

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