https://github.com/rwieruch/react-library
Boilerplate for open sourcing a React library
https://github.com/rwieruch/react-library
Last synced: 6 months ago
JSON representation
Boilerplate for open sourcing a React library
- Host: GitHub
- URL: https://github.com/rwieruch/react-library
- Owner: rwieruch
- Created: 2021-01-24T16:15:21.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-01-28T20:43:17.000Z (over 4 years ago)
- Last Synced: 2025-04-11T11:04:17.186Z (6 months ago)
- Language: TypeScript
- Size: 1.28 MB
- Stars: 22
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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.