cra-template-library
v1.0.4
Published
a template for creating react libraries easily
Downloads
18
Readme
cra-template-library
This is based on the official base template for Create React App.
How-to
1. Create the project
npx create-react-app my-lib-name --template library
2. Develop the library with Storybook (optional)
npm run storybook
2.1 Generate static documentation (optional)
npm build-storybook
3. Test
npm run test
4. Change package.json
{
...
"main": "dist/index.js",
"module": "dist/index.js",
"files": [
"dist",
"README.md"
],
"repository": {
"type": "git",
"url": "git+https://[repository-location/my-lib-name].git"
},
"eslintConfig": {
"extends": "react-app"
},
...
"description": "default description",
"bugs": {
"url": "https://[repository-location/my-lib-name]/issues"
},
"homepage": "https://[repository-location/my-lib-name]#readme",
"keywords": [],
"author": "[my-name]"
},
"husky": {
"hooks": {
"pre-commit": "babel src/lib --out-dir dist --copy-files --ignore __tests__,spec.js,test.js,__snapshots__"
}
}
5. Compile the library
npm run build
The resulted compiled vanilla javascript is generated inside the dist
folder
Pre-defined folders
lib
: all react components to be compiled.__tests__
: jest tests in*.test.js
formatstories
: storybook stories in.stories.js
format
Pre-defined packages
- Babel: to compile the react project into vanilla javascript inside the
lib
folder. This will be the exported project afternpm run prepublishOnly
. - Storybook: development environment for UI components
- Actions: display data received by event handlers in Storybook
- Docs: transform your Storybook stories into world-class component documentation
- Knobs: edit props dynamically using the Storybook UI
- Links: create links that navigate between stories in Storybook
- ViewPort: stories to be displayed in different sizes and layouts in Storybook
- React Testing library: to write maintainable tests for your React components
- AirBnB linting rules