React Package Boilerlplate

Basic package boilerlplate for modular react npm-packages

Steps to create a library:

1. Create modular app structure in src
2. All your components should have .tsx extension
3. Write some tests
4. Rename your library in package.json of your library
5. Update repository field in package.json
6. Add package.json files for parts of the app, which could be used separately to parts folder
7. For better experience, you should add root index.ts file, which will export all the parts
8. Update README to describe your package
9. Create some examples to show how your package can be used, to add library as a dependency for the example:
10. Add "library-name": "link:$relative-path-to-library" to the dependencies of your example
11. Run yarn

Using library

You can import either whole library: import lib from 'library-name;, or a separated part of the library: import FeatureName from 'library-name/parts/FeatureName';

Using scss:

You can use scss preprocessor for your components out of the box:

1. Use import './style.scss'; in the components, which need to be styled
2. All styles will be bundeled to css/main.css
3. Include the library styles on client(for example if you use webpack for your client app):
4. Add @import(~package-name/css/index.css); in main css file if you want to import all styles from the library
5. Add @import(~package-name/css/FeatureName/index.css); in main css file if you want to import styles only for specific part of the library

Adding envs to example:

Because example is based 0n create-react-app it is possible to use custom envs as suggested here

Building:

Run yarn build to prepare your library to be deployed

Releasing:

Run yarn release:$type to release your app (where $type can be: patch, minor or major)

Development

Run yarn start to start your application

Running test

Run yarn test to run tests once Run yarn test:watch to rerun tests each time any file changes