React Draft

📝 WIP: Develop your React components in isolation without any configuration.

React Draft is a local development tool for developing components without any setup. It's primary goal is to deliver a fast, streamlined experience for developing new components in React. It is not meant to serve as a documentation tool or as a component storefront. Other tools, such as Storybook or Styleguidist, provide excellent ways to produce documentation for components. Where React Draft shines is in local development. By shaving off the extra weight that comes with documentatation, addons, and the like, Draft is able to out-perform other local development tools dramatically.

Installation

In your project's root directory, run:

npm i @digital-taco/react-draft

Usage

Using NPX

In your project's root directory, run:

npx draft

Using Node Scripts

In your project's package.json, add:

"scripts": {
  "draft": "draft"
}

Use this command to launch react-draft:

npm run draft

Configuration

An entirely optional file named draft.config.js can be placed in the root directory of your project. This file should have the following structure:

module.exports = {
  optionName: optionValue,
  ...
}

Here are the available options:

Option	What it do
ignore	An array of strings to match filenames against to ignore when parsing for react components. This is useful for skipping files that don't contain development components, like .stories. files or .test. files.
wrapperPath	Path to the draft.wrapper.js file, as described below. If not provided, draft will look for one in the current working directory.
babelModules	An array of strings or regexes to match against additional modules that need to be run through babel that live outside the project's directory or in the project's node_modules.
middleware	A function that is passed the app instance of express. This allows adding custom middleware needed for things like authentication.
port	The port used to run the server. Defaults to 8080.
openAtLaunch	True by default. If false, draft will not open in a new tab at launch.

Ignoring Files

To ignore specific files, use the ignore option:

// draft.config.js
module.exports = {
  ignore: [
    '.stories.',
    '.test.',
  ]
}

Custom Middleware

Example:

// draft.config.js
module.exports = {
  middleware: app => {
    app.use('/flush-ion-cores', (req, res, next) => {
      // flush the icon cores here
    })
  }
}

Wrapper Component

In many cases, additional context is needed for your components to run. This might include providers, service layers, global styling, or similar. To provide these, a wrapper component can be provided that will wrap around each component demo.

To add the wrapper component to your project, add a file named draft.wrapper.js to the root directory of the project. You can store it at a different path, as long as that path is specified under the wrapperPath option in the draft.config.js file.

The wrapper is just a standard react component. It must render any children passed to it. The children passed to it contains the component selected in the UI.

import React from 'react'
// import styles, services, providers, etc.

export default function Wrapper({ children }) {
  // Wrap the children in any providers, services, styles, etc. needed
  return <div>{children}</div>
}

Note: The function can be named anything. Wrapper keeps it consistent across projects.

Contributing & Running Locally

For ease of development, a create-react-app generated application has been created. Developing react-draft is made much simpler by npm linking react-draft within the development repository. Clone both repositories locally, then follow these steps:

Where you cloned react-draft, run:

npm link

Where you cloned react-draft-sandbox, run:

npm link @digital-taco/react-draft

Run draft in the sandbox. Any changes made in react-draft will be applied live.

Authors && Contributors

Zach Williams (@zachintosh)

Kyle West (@kyle-west)