isodev

⚛️ Minimal, Isolated React UI Development Environment

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

npm install --save-dev isodev

isodev src/components/Button.js --open

About

Isodev is a minimal component development and testing environment that doesn't require custom configurations or any initial setup.

Isodev 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, Isodev promotes the use of plain React components to develop examples and style guides for any UI component library.

Getting Started

Isodev 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.

// examples/Button.js
import React from 'react'
import Button from '../src/components/Button'

export default () => (
  <Button color='green'>
    Hello
  </Button>
)

Next, in your terminal run the following command. Be sure you've already installed any dependencies your components might need using npm install.

isodev 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 isodev for a particular project, you might want to add npm run scripts to make using isodev easier for others, and to avoid the need to install isodev globally.

Install isodev as a dev dependency:

npm install --save-dev isodev

In your package.json add a run script:

"scripts": {
  "dev": "isodev examples/Library.js --open"
}

isodev can now be run with the command npm run dev.

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 isodev demo to a static bundle

Components

Isodev 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.

import Library from 'isodev/Library'

XRay

A wrapper for react-x-ray with option to toggle on an off.

import XRay from 'isodev/XRay'

MIT License