Skip to content

Instantly share code, notes, and snippets.

@WickyNilliams

WickyNilliams/README.md

Last active September 24, 2020 11:01
Show Gist options
  • Star 8 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save WickyNilliams/4759b1941306a2c2b3f6 to your computer and use it in GitHub Desktop.
Save WickyNilliams/4759b1941306a2c2b3f6 to your computer and use it in GitHub Desktop.
Download ZIP
So you want to publish a react component?!
Raw
README.md

So you want to publish a react component?!

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)

Assumptions

  1. You are using some sort of module system in your source
  2. You have a build step
  3. You want broad support for your component (browser-ready, npm compatible, consumable by bower)

Precompilation

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 the main field at the entry point in that directory. Typically, this will be named index.js. So your main field might be something like: "lib/index.js"
  • Use the files field of package.json to 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 during npm install

peerDependencies

List React as a peerDependency if you are using features that may break between versions [1][2].

UMD

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

[4] https://twitter.com/mjackson/status/623164643301703680

[5] https://twitter.com/mjackson/status/623174515279859712

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment