46a48539b7
* Cleanup Card layouts * Additional block production overview on explorer * Adjust Card padding for accounts * Observable calculations into ApiObservable * DRY-er combineLatest + .pipe(map(...)) * .pipe(map(...)) * Progress takes value + total, auto-colors * CardSummary with Progress * Small style updates * Cleanup withApiObservable (optional value name) * Cleanup progress props * Cleanup rpc method use * Auto-set the prop from withStorage * Cleanups in observable use * Cleanups to layout * Initial bestNumber * Poll for changes in ApiObservable * WIP (debug) * Initial conversion (untested) or subscribeStorage * s/apiObservable/observable/ * Starting to show stuff (after storage subscriptions). WIP. * Staking UI works, still WIP on rest. * Readability * Storage withObservableDiv, Closes https://github.com/polkadot-js/apps/issues/215 * Add encoding FIXMEs * 'nominee' on set click * Align withObservable with others (single line) * Retrieve ss58 encoded AccountId from storage * Update with latest api (null/undefined storage distinction) |
||
|---|---|---|
| .. | ||
| src | ||
| test | ||
| index.html | ||
| LICENSE | ||
| package.json | ||
| README.md | ||
| webpack.config.js | ||
@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')
);
...