DEV Community

Ada Cheng
Ada Cheng

Posted on • Updated on

Develop a React Component using create-react-library template

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

Table of Contents


  1. Install required libraries

    npm install react react-dom
    npm install yarn
  2. Register a free account in npm, Inc.


  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>')
              .attr('data-text', data.contents[i].text)
   () {
          if (data.contents.length > 0) {
            // Get the first link and click.
      return (
        <div id='pane' className={styles.pane}>
          <div id='navbarDiv' />
          <div id='paneContentDiv' className={styles.paneContent} />
    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 http://localhost:3000/.

  5. Repeat steps 3 - 5 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


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

Top comments (1)

gunslingor profile image

Seems the tool this article relies on is no longer supported.