npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@digital-taco/react-draft

v0.5.17-rc.1

Published

Develop your React components in isolation without any configuration

Downloads

50

Readme

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)