Easy starter code for making a React component into a NPM library 🚀
MIT License
To get started, simply clone this repo:
git clone https://github.com/Teddarific/react-lib-starter.git
Rename the new repo to the name of your library, and go through the package.json
to fill out your own details as well.
Install all the dependencies by running
yarn
To run the library, yarn start
To build the library, yarn build:lib
To build the docs, yarn build:docs
To publish your library, yarn publish
or npm publish
This starter takes advantage of Typescript and Emotion.
This is a personal choice, and I'd encourage you to give it a shot. If you're interested in using plain ES6 and regular scss styling, see release v1 of this library.
Here's a peek of what the file structure looks like:
.
dist
index.js
index.js.map
docs
bundle.js
bundle.js.map
index.html
package.json
src
components
Hello.tsx
docs
index.html
index.tsx
index.ts
tsconfig.json
webpack.dev.config.js
webpack.docs.config.js
webpack.prod.config.js
yarn.lock
Inside src
is where your library will go, and where you can create your own custom React components!
Inside docs
is where you can test your library, and ideal for a demo website that you can show off your cool components. It is what gets hosted when yarn start
runs.
The doc
is all set up to run on gh-pages! Simply go into your repo's settings, and set gh-pages to run based off the source of master branch /docs folder
. Assuming you've built yarn build:docs
and committed it to master, the docs will be published to your gh-pages!
This is by no means the perfect starter pack. This is not set up for testing, nor set up for more complex Redux-based components. This is my personal vision for a simple starter pack to get a simple React component shared with the world!