Skip to content

transitive-bullshit/react-modern-library-boilerplate

Repository files navigation

react-modern-library-boilerplate

Boilerplate and CLI create-react-library for publishing modern React modules with Rollup and example usage via create-react-app.

NPM JavaScript Style Guide

Intro

Note: Modern means modern as of March, 2018.. I'm sure everything will change in a month... 😂 😂

We strongly recommend that you use the accompanying CLI create-react-library to create new modules based off of this boilerplate.

The purpose of this boilerplate is to make publishing your own React components as simple as possible.

Features

  • Easy-to-use CLI create-react-library
  • Transpiles all modern JS features
  • Bundles cjs and es module formats
  • create-react-app for example usage and local dev
  • Rollup for build process
  • Babel for transpilation
  • Jest for testing
  • Supports complicated peer-dependencies
  • Supports CSS modules
  • Sourcemap creation
  • Thorough documentation 😍

Manual Setup

If you'd prefer to setup a new module manually, check out the introductory blog post and the old manual guide.

Examples

Here is an example react module created from this boilerplate: react-background-slideshow, a sexy tiled background slideshow for React. It comes with an example create-react-app hosted on github pages.

Multiple Named Exports

Here is a branch which demonstrates how to create a module with multiple named exports. The module in this branch exports two components, Foo and Bar, and shows how to use them from the example app.

Material-UI

Here is a branch which demonstrates how to create a module that makes use of a relatively complicated peer dependency, material-ui. It shows the power of rollup-plugin-peer-deps-external which makes it a breeze to create reusable modules that include complicated material-ui subcomponents without having them bundled as a part of your module.

License

MIT © Travis Fischer

Support my OSS work by following me on twitter twitter