ship-my-component-npm

React follows a convention where the index.js file is responsible for exporting contents of a folder.
This project will publish your component if run from a folder with an index.js file that exports the component.

1. Adds webpack and some folder conventions to let you publish components to npm publically.

2. Has a cleanup command to remove what was added.

3. Great for open sourcing a single component folder of your react application
   such as releasing a login screen for people to utilize and modify.

4. Easy for a developer to upgrade the version number when republishing their component.

Verified working on Ubuntu-Linux ✅ Macintosh Mojave ✅

npx ship-my-component-npm

## cleanup
npx ship-my-component-npm cleanup

Linux Users

# ensure expect is installed
sudo apt-get install expect;

# expect is a unix program that comes by default on a mac. It allows your program to interact with another applications prompt. This project uses expect to interact with npm init. Decreasing the amount of prompts from 8 prompts to 3 prompts.

Try out a previously published react component:

run this command in the terminal

npm install react-publish-ship

include the nodemodule in your react project

import ReactPublishShip from 'react-publish-ship';
...
render(){
  <div>
    <ReactPublishShip />
  </div>
}
...

This project was made possible thanks to the following blog post:
https://medium.com/@BrodaNoel/how-to-create-a-react-component-and-publish-it-in-npm-668ad7d363ce

In the article a src directory is used. This project has changed the webpack config so as to use the current directory not a src directory.

Contribute

Per request, additional modifications could be added to make these scoped packages so that they stay within a company.

Let me know if you find this useful, on twitter m_dimmitt

Open an issue for a feature request or to report an issue.

Thanks!!

Current Contributors: Vladamir Pliuta Michael Dimmitt

Known projects published using ship my component: (feel free to submit a pr if you published a react component!)

react-publish-ship source
hello-world-npm-component source

Below is a project with a ton of components, using the script for this project I could easily share a front end component with the outside world.