rwieruch/react-library

Boilerplate for open sourcing a React library

React Library

Setup

Installation

• git clone this repository
• first terminal: cd demo && npm install && npm start
• second terminal: cd library && npm run library:build

Publish

• create account on https://www.npmjs.com
• npm login on command line
• replace rwieruch-react-library in all files with your-name-react-library
• first terminal: cd library && npm run library:build && npm publish
• second terminal: cd demo && npm install your-name-react-library

Update

• make changes in /library
• increment version in package.json
• first terminal: cd library && npm run library:build && npm publish
• second terminal: cd demo && npm install your-name-react-library

Tasks

Webpack to Rollup

• The /library is build with Webpack and Babel. However, Rollup is the most popular choice when it comes to libraries. So exchange Webpack with Rollup, but keep and use the .babelrc.

Code Splitting

• Webpack does code splitting at the moment. Rollup should do the same, so that the annotated // TODO imports in /demo/src/App.js work.

TypeScript

• Make /library work with TypeScript and export the type definitions. Then convert /demo to TypeScript and use the typed library.

CSS Modules instead of Styled Components

• Make /library work with CSS Modules instead of TypeSript. The crucial file that needs to work is /library/src/Data/Item/index.js with its theme and offset. So injecting CSS from the outside needs to work (theme) and setting dynamic values (offset) should work too.

NPM Link

• Use NPM linking, so that /library can be used like a library in /demo, but without installing it via npm.