emahnovets / react-components-library-boilerplate

Simple boilerplate for easy creation of your own react components library.

React Components Library Boilerplate

Simple boilerplate for easy creation of own react components library.

Basic usage

1. Clone this repo using

git clone [email protected]:emahnovets/react-components-library-boilerplate.git <my-awesome-lib>

2. Remove .git directory

rm -rf .git

3. Personalize package.json. Changes:

• Name
• Author
• Repository
• Licence

4. Initialize git and commit your changes

Features

• Typescript
• TSLint & Prettier (with airbnb config)
• Jest for testing (Enzyme + jest-image-snapshot) (one note: it would be better to use one machine to update and compare image snapshot since rendering can be a bit different from platform to platform)
• Webpack 4
• Storybook for components demo
• CSS Modules (SCSS supported)
• Example component

Tasks

1. yarn start - run storybook for development and demo
2. yarn build:storybook - build components demo with docs
3. yarn build - build package
4. yarn lint - lints components code
5. yarn test - perform all tests. (storybook demo should be started using 1st command)
6. yarn format - format code using prettier

License

react-components-library-boilerplate is available under MIT. See LICENSE for more details.

react-components-library-boilerplate's Issues

Hooks support

Now, it is not possible use react hooks inside component.

I tried to use react 16.13.0 (as a peerDep in package.json) with webpack configuration:

package.json:

...
	"peerDependencies": {
		"react": "^16.13.0",
		"react-dom": "^16.13.0"
	},
...

Webpack config:

const path = require('path');
const styleLoaders = require('./scripts/style-loaders');

const pkg = require('./package.json')

const externals = (context, request, callback) => {
	const isPeerDep = Object.keys(pkg.peerDependencies).some(depKey => {
		if (request === depKey) return true
		if (request.startsWith(`${depKey}/`)) return true
		return false
	})
	if (isPeerDep) {
		return callback(null, 'commonjs2 ' + request)
	}
	return callback()
}


module.exports = {
	mode: 'production',
	entry: './src/index.ts',
	output: {
		path: path.resolve('dist'),
		filename: 'index.js',
		library: '',
		libraryTarget: 'commonjs2'
	},

	resolve: {
		extensions: ['.ts', '.tsx', '.js', '.jsx'],
	},
	externals,
	module: {
		rules: [
			{
				test: /\.(ts|tsx)$/,
				exclude: /\.stories\.(ts|tsx)$/,
				loader: 'ts-loader'
			},
			...styleLoaders,
		]
	}
}

Build works fine, but after import in new project (create-react-app) I am getting an error:

×
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

It should be fine support hooks too.

Or, is there any quick fix?

Thank you.