starter-react-component

Create a React Component to publish as a npm module

Usage no npm install needed!

<script type="module">
  import starterReactComponent from 'https://cdn.skypack.dev/starter-react-component';
</script>

README

Starter-React-Component

Publishing React Component is not so easy task as just writing a React Component. This tool will help you to create a React component which has the npm publishing feature.

Usage

  1. Create directory for new npm module
mkdir [my-new-npm-module] && cd [my-new-npm-module]

Notice: This name is used for your module name on npm. Your module will be installed as npm install your-new-react-component. npm allows only lowercase.

  1. Generate new project
npx starter-react-component init [MyNewReactComponent]

Notice: Following libraries are used in new project.

  • TypeScript
  • Webpack
  • Babel
  • ESLint
  • Jest
  • etc.

How to publish my React Component to npm

  1. Add your name to the auther key of the generated package.json.

  2. Develop the ./src/[MyNewReactComponent].tsx

  3. Publish it to npm.

npm login
npm publish

my-new-npm-module will be published on npm.

How to use the published React Component

import { MyNewReactComponent } from "[my-new-npm-module]";

const MyApp = () => (
  <div>
    <MyNewReactComponent />
  </div>
)

Other commands

npm start       // Display your React Component in a demo page
npm test        // Run test
npm run lint    // Run ESLint

License

  • MIT