# relab > Isolated React component development CLI Latest version **1.0.0-23** (published 2017-09-02) · MIT license · 0 weekly downloads ## Install ```sh npm install relab pnpm add relab yarn add relab bun add relab ``` Provides the command `relab`. ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.0-23 | | Published | 2017-09-02 | | First published | 2017-05-21 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Node | >=7.0.0 | | Dependencies | 22 | | Known vulnerabilities | 0 (+7 in 1 direct dependencies) | | Install scripts | no | | Author | Brent Jackson | | Maintainers | jxnblk | | Keywords | react, component, development, cli | ## Links - npm: https://www.npmjs.com/package/relab - Repository: https://github.com/jxnblk/relab - Homepage: https://github.com/jxnblk/relab#readme - Issues: https://github.com/jxnblk/relab/issues - npm.io page: https://npm.io/package/relab ## Dependencies (22) - [opn](https://npm.io/package/opn.md) ^5.1.0 - [ora](https://npm.io/package/ora.md) ^1.3.0 - [meow](https://npm.io/package/meow.md) ^3.7.0 - [chalk](https://npm.io/package/chalk.md) ^1.1.3 - [react](https://npm.io/package/react.md) ^15.6.1 - [refunk](https://npm.io/package/refunk.md) ^1.0.0-2 - [is-json](https://npm.io/package/is-json.md) ^2.0.1 - [webpack](https://npm.io/package/webpack.md) ^3.1.0 - [react-dom](https://npm.io/package/react-dom.md) ^15.6.1 - [babel-core](https://npm.io/package/babel-core.md) ^6.25.0 - [css-loader](https://npm.io/package/css-loader.md) ^0.28.1 - [react-x-ray](https://npm.io/package/react-x-ray.md) ^1.0.0-2 - [babel-loader](https://npm.io/package/babel-loader.md) ^7.1.1 - [loader-utils](https://npm.io/package/loader-utils.md) ^1.1.0 - [babel-register](https://npm.io/package/babel-register.md) ^6.24.1 - [app-module-path](https://npm.io/package/app-module-path.md) ^2.2.0 - [is-plain-object](https://npm.io/package/is-plain-object.md) ^2.0.1 - [update-notifier](https://npm.io/package/update-notifier.md) ^2.2.0 - [babel-preset-env](https://npm.io/package/babel-preset-env.md) ^1.6.0 - [babel-preset-react](https://npm.io/package/babel-preset-react.md) ^6.24.1 - [webpack-dev-server](https://npm.io/package/webpack-dev-server.md) ^2.5.1 - [babel-preset-stage-0](https://npm.io/package/babel-preset-stage-0.md) ^6.24.1 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 1.0.0-23 (latest) — 2017-09-02 - 1.0.0-17 (next) — 2017-08-12 - 1.0.0-22 — 2017-09-02 - 1.0.0-21 — 2017-09-01 - 1.0.0-20 — 2017-08-19 - 1.0.0-19 — 2017-08-13 - 1.0.0-18 — 2017-08-13 - 1.0.0-16 — 2017-07-14 - 1.0.0-15 — 2017-07-14 - 1.0.0-14 — 2017-07-14 - 1.0.0-13 — 2017-07-10 - 1.0.0-12 — 2017-06-02 - 1.0.0-11 — 2017-06-02 - 1.0.0-10 — 2017-06-02 - 1.0.0-beta.9 — 2017-05-22 - … 8 more at https://npm.io/package/relab/versions ## README # RELAB :atom_symbol: Minimal, Isolated React UI Development Environment ![Demo](screen.gif) ## Features - Isolated development environment - Zero-configuration - Render any React component - Hot reloading - Fullscreen - No UI - No custom APIs required - Support for custom CSS and stylesheets ## Install ```sh npm install -g relab ``` ```sh relab src/components/Button.js --open ``` ## About RELAB is a minimal component development and testing environment that doesn't require custom configurations or any initial setup. RELAB helps you develop UI components in a test environment that's isolated from the rest of your codebase, encouraging the development of reusable components that are small and easy to test. Instead of relying on extra configurations, RELAB promotes the use of plain React components to develop examples and style guides for any UI component library. ## Getting Started RELAB can load any React component, but typically you'll want to create test cases to see a single component in multiple states. Suppose you have a library of UI components in a folder named `/src/components`. To test these components, create an `examples` folder that will be used for displaying test states as well as serving as code examples. In the example folder, create a file to demonstrate the use of a Button component. ```jsx // examples/Button.js import React from 'react' import Button from '../src/components/Button' export default () => ( ) ``` Next, in your terminal run the following command. Be sure you've already installed any dependencies your components might need using `npm install`. ```sh relab examples/Button.js --open ``` The `--open` flag will automatically open the development environment in your default browser. In the browser, you should see a live reloading view of your component. ### Project Setup To use RELAB for a particular project, you might want to add npm run scripts to make using relab easier for others, and to avoid the need to install RELAB globally. Install RELAB as a dev dependency: ```sh npm install --save-dev relab ``` In your `package.json` add a run script: ```json "scripts": { "relab": "relab examples/Library.js --open" } ``` RELAB can now be run with the command `npm run relab`. ## CLI Options ``` -p --port Port for dev server -o --open Open in default browser -s --stylesheet Path to stylesheet to include -c --config Path to config file -e --export Export the RELAB demo to a static bundle ``` ## Components RELAB includes several wrapper components that can be used for development. ### Library Creates a library view of multiple components with controls for cycling through each component. ```jsx import Library from 'relab/Library' ``` ### XRay A wrapper for [react-x-ray][xray] with option to toggle on an off. ```jsx import XRay from 'relab/XRay' ``` [xray]: https://github.com/jxnblk/react-x-ray/ [MIT License](LICENSE.md) --- _Source: https://npm.io/package/relab · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._