9c1c4ee96f
* fix: last block timer * refactor: update BlockHeader and BlockHeaders to use AugmentedBlockHeader type and add blockTime calculation * refactor: remove isLast prop from BlockHeader and update BlockHeaders mapping fix: update label in Summary component from 'target' to 'slot' fix: improve block time calculation in BlockAuthors context * refactor: update BlockHeader to accept multiple headers and group by timestamp in BlockHeaders * refactor: update BlockHeader time formatting and adjust display value units * refactor: simplify BlockAuthorsCtxRoot by removing blockTime calculation and parent timestamp retrieval * feat: enhance calcDelay function to handle elastic scaling and distribute delays across blocks |
||
|---|---|---|
| .. | ||
| src | ||
| .skip-build | ||
| .skip-npm | ||
| index.html | ||
| package.json | ||
| README.md | ||
| tsconfig.build.json | ||
@polkadot/react-query
WARNING: This is an internal package to polkadot-js/apps so is not intended (yet) for broad use. Since these are generic components, they will move to the polkadot-js/ui repo once deemed stable and usable.
For the existing sharable components usable in external React-based projects, take a look at the polkadot-js/ui documentation
Overview
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/react-query';
...
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')
);
...