# react-components-viewer

> components viewer for UI library development

Latest version **0.10.1** (published 2019-01-18) · Apache-2.0 license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install react-components-viewer
pnpm add react-components-viewer
yarn add react-components-viewer
bun add react-components-viewer
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.10.1 |
| Published | 2019-01-18 |
| First published | 2018-01-29 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Node | >=8.0.0 |
| Dependencies | 3 |
| Unpacked size | 142.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 12 |
| Author | mykolagolubyev |
| Maintainers | mykolagolubyev |

## Links

- npm: https://www.npmjs.com/package/react-components-viewer
- Repository: https://github.com/MykolaGolubyev/react-components-viewer
- Homepage: https://github.com/MykolaGolubyev/react-components-viewer#readme
- Issues: https://github.com/MykolaGolubyev/react-components-viewer/issues
- npm.io page: https://npm.io/package/react-components-viewer

## Dependencies (3)

- [react](https://npm.io/package/react.md) ^16.4.0
- [react-dom](https://npm.io/package/react-dom.md) ^16.4.0
- [url-search-params-polyfill](https://npm.io/package/url-search-params-polyfill.md) ^3.0.0

## Recent versions

- 0.10.1 (latest) — 2019-01-18
- 0.10.0 — 2019-01-18
- 0.9.0 — 2019-01-16
- 0.8.1 — 2018-08-18
- 0.8.0 — 2018-08-18
- 0.7.0 — 2018-08-18
- 0.6.0 — 2018-08-06
- 0.5.7 — 2018-08-05
- 0.5.6 — 2018-08-05
- 0.5.5 — 2018-08-04
- 0.5.4 — 2018-08-04
- 0.5.3 — 2018-08-04
- 0.5.2 — 2018-04-12
- 0.5.1 — 2018-04-09
- 0.5.0 — 2018-03-22
- … 9 more at https://npm.io/package/react-components-viewer/versions

## README

# Installation

```
npm install react-components-viewer --save-dev 
```

# React Components Viewer

Is a React component to preview and develop your components.
Use it in your CRA created app as a demo app.

```typescript 
import * as React from 'react';

import { Registry, ComponentsViewer } from 'react-components-viewer';

import { buttonsDemo } from './demos/buttons';
import { linksDemo } from './demos/links';
import { profileScreenDemo } from './demos/profileScreen';
import { formsDemo } from './demos/forms';
import { sideBySideDemo } from './demos/sideBySide';

const widgets = new Registry('widgets');
widgets
    .registerAsGrid('Links', 300, linksDemo)
    .registerAsTwoColumnTable('Forms', formsDemo)
    .registerAsTwoColumnTable('Buttons', buttonsDemo)
    .registerSingle('Single Screen', profileScreenDemo)
    .registerAsMiniApp('Single Screen mini app', '/app', profileScreenDemo);

const layouts = new Registry('layouts');
layouts
    .registerSingle('Side by Side', sideBySideDemo);

export function App() {
    return (
        <ComponentsViewer registries={[widgets, layouts]}/>
    );
}
```

It will work with your build system, the language of your choice and style processing.

![screen example](img/screen-example.png)

# Demo functions

Demo must be defined in a function that accepts `Registry`. Function should register components to display.

```typescript
export function buttonsDemo(registry: Registry) {
    registry
        .add('enabled', () => <Button label="click me" onClick={onClick}/>,
             `long description
             multiline markdown`)
        .add('disabled', () => <Button label="click me" enabled={false} onClick={onClick}/>)
}
``` 

# Registration methods

`registerAsGrid` name, minWidth, demoFunction

`registerAsRows` name, demoFunction

`registerAsTwoColumnTable` name, demoFunction

`registerAsTabs` name, demoFunction

`registerAsSingle` name, demoFunction

---
_Source: https://npm.io/package/react-components-viewer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._