Skip to content

Latest commit

 

History

History
 
 

react-query

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
src
src
 
 
.skip-build
.skip-build
 
 
.skip-npm
.skip-npm
 
 
LICENSE
LICENSE
 
 
README.md
README.md
 
 
index.html
index.html
 
 
package.json
package.json
 
 
tsconfig.build.json
tsconfig.build.json
 
 

README.md

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