0.10.1 • Published 5 years ago
react-components-viewer v0.10.1
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.
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.
Demo functions
Demo must be defined in a function that accepts Registry
. Function should register components to display.
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
0.10.1
5 years ago
0.10.0
5 years ago
0.9.0
5 years ago
0.8.1
6 years ago
0.8.0
6 years ago
0.7.0
6 years ago
0.6.0
6 years ago
0.5.7
6 years ago
0.5.6
6 years ago
0.5.5
6 years ago
0.5.4
6 years ago
0.5.3
6 years ago
0.5.2
6 years ago
0.5.1
6 years ago
0.5.0
6 years ago
0.4.1
6 years ago
0.3.1
6 years ago
0.3.0
6 years ago
0.2.4
6 years ago
0.2.3
6 years ago
0.2.2
6 years ago
0.2.1
6 years ago
0.2.0
6 years ago
0.1.0
6 years ago