reuse-react-component

0.1.12 • Public • Published

Serve your React Component by npm

You can publish your own React component to npm, below you'll see how to publish your own component to npm step by step.

  1. Create a React application using

        npx create-react-app your-component-name
    
  2. Add dependencies

    npm:

        npm i --save-dev @babel/cli @babel/preset-react
        
        or
    
        npm install --save-dev @babel/cli @babel/preset-react
    

    yarn:

        yarn add @babel/cli @babel/preset-react -D
    
        or 
    
        yarn add @babel/cli @babel/preset-react --dev
    
  3. Add Babel react presets to your newly created application's package.json

        "babel": {
            "presets": [
            "@babel/preset-react"
            ]
        },
  4. Change scope to public

        "private": false,
  5. Add instruction to copying your component to dist in react-script after transpilation

    Windows:

        "publish:npm": "rmdir /s /q dist && mkdir dist && babel .\\src\\component -d dist --copy-files"

    Linux:

        "publish:npm": "rm -rf dist && mkdir dist && babel src/component -d dist --copy-files"
  6. Create your component inside dir component or you can name it anything you want, but be sure you are changing name in previous 'react-script' instruction. and give any name to your component file name. but be sure you'll change the name in package.json's main value.

        import React from 'react'
    
        function ReuseableComponent() {
            return (
                <div>
                    Hello, World!
                </div>
            );
        }
    
        export default ReuseableComponent;

    For this example I've created a simple React component that prints 'Hello, World!' whenver you use this component in your React application and gave file name as index.js.

  7. Include entrypoint in your package.json, according your file name.

        "main": "./dist/index.js",
  8. And, last you have to add dependencies in your package.json, whenever you created React application you've seen some dependencies are already added, but you need to modify dependencies field to peerDependencies cause if any React including your module in their application they will definitely have basic dependencies so peer dependencies items won't be duplicated there.

        "peerDependencies": {
            "react": "^17.0.2",
            "react-dom": "^17.0.2",
            "react-scripts": "4.0.3"
        },
  9. Run publish:npm it will generate new files every time inside directory dist.

    npm: npm run publish:npm yarn: yarn publish:npm

  10. Publish your React to npm

        npm login
    
        npm publish
    

    Be sure, you've npm account and change version everytime whenever you publish your module to npm.

Happy Coding :)

Readme

Keywords

none

Package Sidebar

Install

npm i reuse-react-component

Weekly Downloads

1

Version

0.1.12

License

none

Unpacked Size

26.3 kB

Total Files

12

Last publish

Collaborators

  • bhar4t