This is a quick guide of what you need to do to publish a react component for use by others. This guide is distilled from a conversation [0] on twitter. I will reference individual tweets, where appropriate (thereby shifting blame for incorrect advice from me to the authors :D)
- You are using some sort of module system in your source
- You have a build step
- You want broad support for your component (browser-ready, npm compatible, consumable by bower)
Your component should be precompiled before distribution, so as not to burden consumers with your technology choices. For example, if you are using JSX and ES2015, your published code should contain neither.
- Precompile to a directory that is ignored by git. This folder can be named whatever you wish. Let's assume
lib. - In your
package.json, point themainfield at the entry point in that directory. Typically, this will be namedindex.js. So your main field might be something like:"lib/index.js" - Use the
filesfield ofpackage.jsonto whitelist files to be included in package. This keeps the npm install as small as possible, limiting the number of bytes transferred over the wire duringnpm install
List React as a peerDependency if you are using features that may break between versions [1][2].
Some users may not use a module system, or may choose other package managers (hey, bower!). To broaden the reach of your component you should try to support these. Creating a UMD build will allow your component to consumed by bower users and directly in the browser [3]. This file should placed in the directory you publish to npm (lib in the example above), and be committed to git for easy consumption [4][5].
[0] https://twitter.com/WickyNilliams/status/623162206088241152
[1] https://twitter.com/dan_abramov/status/623162713640947712
[2] https://twitter.com/ken_wheeler/status/623163263665238017
[3] https://twitter.com/mjackson/status/623163550781980673