UPDATE: You can use the npm package [create-component-lib](https://www.npmjs.com/package/create-component-lib) to automate all the steps described in this blog post.
create-component-lib_Create a library of React components that can be published to npm_www.npmjs.com
Create React App is easily the best tool for creating and developing React applications. With a little bit of work, it can also be used to create a library of React components that can be published to npm and used in other React applications. Here's what you need to do:
1. Create a new project using create-react-app:
create-react-app simple-component-library
2. Delete all the files inside src/, and create a new index.js file with some starter code:
3. Create a new folder src/lib and place your React components inside it. src/lib will serve as the root folder of the module published to npm. Here’s the code for an example component:
Styling can be done inline, or in separate CSS files:
Finally, the component can be exported from src/lib for ease of importing:
Optionally, you can also write tests for the components inside src/lib:
4. (Optional) Use the components in src/index.js to create examples for testing and debugging during development. Any code placed outside src/lib will not be published to npm. Here is an example usage of TextInput:
Run npm start and navigate to http://localhost:3000 to view the result.
It works (duh!)
Tip: Use [react-live](https://github.com/FormidableLabs/react-live) to create a live-editable documentation site!
5. Install [babel-cli](https://babeljs.io/docs/usage/cli/) using the command npm i babel-cli --save-dev and create a file .babelrc in the root of the project with the following contents:
{ "presets": [["react-app", { "absoluteRuntime": false }]]}
6. Replace the build script inside package.json with the following:
"build": "rm -rf dist && NODE_ENV=production babel src/lib --out-dir dist --copy-files --ignore __tests__,spec.js,test.js,__snapshots__"
The command npm run build will now transpile the code inside src/lib (ignoring tests and snapshots) into the folder dist.
7. Remove the line "private": true from package.json. Also remove react-scripts, react and react-dom from dependencies, and move them to [devDependencies](https://docs.npmjs.com/files/package.json#devdependencies). Additionally, you can also add react and react-dom to [peerDependencies](https://docs.npmjs.com/files/package.json#peerdependencies).
8. To prepare for publishing, add the following lines to package.json:
"main": "dist/index.js", "module": "dist/index.js", "files": [ "dist", "README.md" ], "repository": { "type": "git", "url": "URL_OF_YOUR_REPOSITORY" }
9. Remove the default README.md file, and create a new one with some information about the library.
# simple-component-libraryA library of React components created using `create-react-app`.
## InstallationRun the following command:`npm install simple-component-library`
10. Publish to [npm](https://docs.npmjs.com/getting-started/publishing-npm-packages)!
npm run publish
And that’s it! Now you can install the library with the command npm install simple-component-library and use it in any project created using Create React App. Here’s the full code for this article:
aakashns/simple-component-library_simple-component-library - Example to demonstrate creation of React component libraries using Create React App_github.com
You can clone the repository and use it as a starting point to skip some of the steps. Hope it helps!
