iflex-react-library

Create React Component Libraries

If you have tried it, let's face it BUILDING REACT COMPONENT LIBRARIES IS NOT EASY. Having used many existing templates utilising webpack or rollup I have been frustrated by various hurdles such as:-

• Fail to publish to NPM as ESN modules.
• Does not support SASS
• Import of modules breaks when you attempt to consume library via an external application
• Imports break when hooks are used in your component library
• Developing your test or demonstration environment using npm link is cumbersome and requires rebuilding package, caching headaches and no support for hot loading

This template allows your library to be developed in the src folder. You can place your demonstration / test application in the demo folder and link to it through an alias that matches your externally published package name.

Storybook is also implemented to allow easy testing of your components without building links within the demo foler.

Key Technologies

• Rollup
• Sass
• TypeScript
• Storybook for easy testing of components
• [react-scripts] for build and deployment

NPM Distribution Files

iflex-react-library (using rollup) will create distribution files (in dist directory) for Common JS (index.js), ESM Modules (index.modern.js) and UMD (index.umd.js)

Testing

npm start
or
yarn start

Building

npm run build
or
yarn build

Publishing

npm run publish
or
yarn publish

## Storybook

To run a live-reload Storybook server on your local machine:

npm run storybook