014ae780e4
* Split ui-api, update API version * Update (awaiting API changes to go through) * Cleanup ui-api exports * Bump API (SubscriptionPromise support) * Linting fixes * Update renames * Do display balances.Transfer (shows for non-owned accounts) * Bump API
37 lines
1.0 KiB
Markdown
37 lines
1.0 KiB
Markdown
# @polkadot/ui-reactive
|
|
|
|
A collection of RxJS enabled React components that operate with the [@polkadot/api-rx](https://github.com/polkadot-js/api) 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,
|
|
|
|
```js
|
|
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.
|
|
|
|
```js
|
|
...
|
|
ReactDOM.render(
|
|
<Api>
|
|
<NodeTime className='rx-time' label='current node time:' />
|
|
</Api>,
|
|
document.querySelector('#container')
|
|
);
|
|
...
|
|
```
|