https://github.com/testingisdocumenting/react-component-viewer
React Component to help with development of other React components
https://github.com/testingisdocumenting/react-component-viewer
Last synced: 6 months ago
JSON representation
React Component to help with development of other React components
- Host: GitHub
- URL: https://github.com/testingisdocumenting/react-component-viewer
- Owner: testingisdocumenting
- License: apache-2.0
- Created: 2017-07-11T14:08:16.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2021-02-24T02:51:46.000Z (almost 5 years ago)
- Last Synced: 2025-06-22T04:03:51.597Z (7 months ago)
- Language: TypeScript
- Homepage:
- Size: 1.78 MB
- Stars: 12
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Intro
```typescript
import { ComponentViewer } from 'react-component-viewer';
```
React Component to help you with development of other React components.
* just a component, no separate build system,
* observe component states all at once or zoom into a single component or a screen for debugging,
* user defined theme switching for multi brand/theme development.
# Installation
```
npm install react-component-viewer --save-dev
```
# CRA Example
```typescript
import * as React from 'react';
import { Registries, ComponentViewer } from 'react-component-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 registries = new Registries({componentWrapper: DemoWrapper});
registries.add('components')
.registerAsGrid('Links', 300, linksDemo)
.registerAsTwoColumnTable('Buttons', buttonsDemo)
.registerAsRows('Inputs', inputsDemo);
registries.add('layouts')
.registerAsRows('Side by Side', sideBySideDemo);
registries.add('screens')
.registerSingle('Single Screen', profileScreenDemo)
.registerAsMiniApp('Single Screen mini app', '/app', profileScreenDemo);
export class App extends React.Component {
render() {
return (
);
}
}
```
# Read more
[More detailed explanation](https://medium.com/@mykolagolubyev/react-component-viewer-ff7cf793695a)