In this article, I would like to document how I created a React component and published it.

Prerequisites

1. Install NodeJs.

   • On Ubuntu.

   apt install node
   

2. Install NPM.

   • On Ubuntu.

   apt install npm
   

3. Install required libraries.

   npm install react react-dom
   
   npm install yarn
   

4. Register a free account in npm, Inc.

Procedure

1. Use the create-react-library to create a template.

   npm install -g create-react-library && create-react-library
   

   Answer to questions:

   Package Name reactjs-tabbedpane-component

   Package Description A tabbed pane component using React.js

   Author's GitHub Handle adafycheng

   GitHub Repo Path adafycheng/reactjs-tabbedpane-component

   License MIT

   Package Manager yarn

   Template default

2. Modify src/index.js.

    import React from 'react'
    import styles from './styles.module.scss'
    import $ from 'jquery'
   
    const TabbedPaneComponent = ({ data }) => {
      $(function () {
      // read the input JSON content
        if (data !== undefined) {
          for (let i = 0; i < data.contents.length; i++) {
            const newDiv = $('<div class=' + styles.navbar + '></div>')
            const newAnchor = $('<a class="paneLink"></a>')
              .text(data.contents[i].subject)
              .attr('data-text', data.contents[i].text)
            newDiv.append(newAnchor)
            newAnchor.click(function () {
              $('#paneContentDiv').html($(this).data('text'))
            })
            $('#navbarDiv').append(newDiv)
          }
          if (data.contents.length > 0) {
            // Get the first link and click.
            $('.paneLink:first').click()
          }
        }
      })
   
      return (
        <div id='pane' className={styles.pane}>
          <div id='navbarDiv' />
          <div id='paneContentDiv' className={styles.paneContent} />
        </div>
      )
    }
   
    export default TabbedPaneComponent
   

3. Modify example/src/App.js for testing.

    import React from 'react'
   
    import TabbedPaneComponent from 'reactjs-tabbedpane-component'
    import 'reactjs-tabbedpane-component/dist/index.css'
   
    const contentData = {
      contents: [
        {
          subject: 'Overview',
          text: 'This is content of <a href="#">Overview</a>.'
        },
        {
          subject: 'Assumptions',
          text: '<ul><li>Assumption 1</li><li>Assumption 2</li><li>Assumption 3</li><li>Assumption 4</li></ul>'
        },
        {
          subject: 'Technical Design',
          text: 'This is content of Technical Design.'
        },
        {
          subject: 'Data Design',
          text: 'This is content of Data Design.'
        },
        {
          subject: 'Conclusion',
          text: 'This is content of Conclusion.'
        }
      ]
    }
   
    const App = () => {
      return <TabbedPaneComponent data={contentData} />
    }
   
    export default App
   

4. To test,

   In one terminal,

   cd reactjs-tabbedpane-component && yarn start
   

   In another terminal,

   cd reactjs-tabbedpane-component/example && yarn start
   

   View the component using browser at localhost:3000.

5. Repeat steps 2 - 4 for any code changes.

6. To publish, update package.json for versions.

   {
     "name": "reactjs-tabbedpane-component",
     "version": "1.0.8",
     "description": "A tabbed pane component built using React.js",
     "author": "adafycheng",
     "license": "MIT",
     "repository": "adafycheng/reactjs-tabbedpane-component",
     "main": "dist/index.js",
     "module": "dist/index.modern.js",
     "source": "src/index.js"
   }
   

7. Build the component.

   npm run build
   

8. Publish the component.

   npm publish
   

References

1. Create React App
2. Source code in GitHub
3. Published component