History

Jaco Greeff 33892a2e31 Nav re-imagined (#3422 ) * Playthrough with top navigation * Sycky, but navigation works... * Adjust * grouping * It works, but is not great * Cleanups * Cleanups * hover color * Highlights * Highlights, part 2 * Background to body * Small adjustments (size, items) * Localize Modal/route switching * Remove light/full mode * Flatter single-entry menus * Adjustments for single-enrties (e.g. Kulupu) * Display NodeInfo * Misc * Content & Tabs sizing * Tab counters as bubbles * Alignment * Tabs styling * Adjust font color to defaults * Small tabs menu color adjustments * ... the previous, again, adjusted * Display Wiki/Github links * ar motions * Adjust Endpoints location * Ensure content grows to available height * Adjust tabs * Menu background adjustment * Adjust popup colors * Adjust highlights * Sligh breathing room * Adaptive header background * 2/3 * Adaptive is ok... for now. * Back to black... erm, gray * Lighten * Touchups. Stop playin, it is ok... * Sides readability * Cleanups. * Adjust. * Overall adjustments (theme). Fix Tag yellow. * Ok. Done. * Ship it.		2020-08-20 17:50:30 +02:00
..
src	Nav re-imagined (#3422 )	2020-08-20 17:50:30 +02:00
.skip-build	Skip npm	2020-02-27 22:18:23 +01:00
.skip-npm	Skip npm	2020-02-27 22:18:23 +01:00
index.html	Rename ui-* -> react-* (#1495 )	2019-08-12 13:12:05 +02:00
LICENSE	Rename ui-* -> react-* (#1495 )	2019-08-12 13:12:05 +02:00
package.json	[CI Skip] release/beta 0.55.0-beta.18	2020-08-20 10:48:41 +00:00
README.md	Rename ui-* -> react-* (#1495 )	2019-08-12 13:12:05 +02:00
webpack.config.js	Bump dev (incl. eslint fixes) (#2502 )	2020-04-01 21:31:36 +02:00

README.md

@polkadot/react-query

WARNING: This is an internal package to polkadot-js/apps so is not inteded (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')
);
...