How to write a simple React plugin, publish it to npm, and deploy it to Github pages

Getting started Our target is to create and publish a ReactJS plugin so we can access it via NPM directly. I'm going to creat react plugin using create-react-library which is a CLI for easily creating reusable react libraries. This CLI has a bunch of features and will help us in generating a full featured project as well as plugin. To use create-react-library, we’ll need to install it globally: npm install -g create-react-library The above command will install create-react-library globally and we can generate a new module from any directory. Now execute following command to create an module which will ask you some basic questions about your plugin and will take few minutes to complete installation of reactjs plugin: create-react-library

After plugin project created navigate to project directory using cd react-profile-image-box Now, you need to run the plugin (for watching any changes that you make to it) and the example. In one tab, you can run: npm start And, in another tab, you need to run the example app: cd ./example && npm start The last command will run a create-react-app project which imports your plugin. If you make any changes to your plugin, it will get reflected in the example app. You can view the current status of your plugin by visiting http://localhost:3000.

import React, { Component } from 'react' import PropTypes from 'prop-types' import styles from './styles.css' export default class ProfileImageBox extends Component { /** * src: The src for img tag * alt: Alt text for img tag * allowUpload: Boolean field to set if image can be changed or not * onFileChange: A function that will receive file change event */ static propTypes = { src: PropTypes.string, alt: PropTypes.string, allowUpload: PropTypes.bool, onFileChange: PropTypes.func } static defaultProps = { allowUpload: false, onFileChange: function(e, additionalParams) { alert("You need to implement onFileChange(e) method") } } constructor (props) { super(props) } render() { const { src, alt, allowUpload, onFileChange } = this.props return ( <div className={styles.react_profile_image_box_container}> {allowUpload ? (<input className={styles.react_profile_image_box_upload_profile_image_input} onChange={(e) => onFileChange(e)} type="file"/>) : ''} <img className={styles.react_profile_image_box_rounded_circle} alt={alt} src={src} data-holder-rendered="true"/> </div> ) } }

You should use above plugin as below:

import React, { Component } from 'react' import ProfileImageBox from 'react-profile-image-box' export default class App extends Component { state = { src: "http://test.com/avatar_images_by_user/72" } onFileChange(e, additionalParams) { console.log(e.target.files); console.log(additionalParams); this.setState({src: "http://test.com/avatar_images_by_user/70"}); // YOU SHOULD UPLOAD YOUR FILE FROM HERE // AND SET SCR AGAIN TO SEE LATEST PRICTURE } render () { return ( <div> <ProfileImageBox alt="Alt Text" allowUpload={true} onFileChange={(e) => this.onFileChange(e, {type: 'user-image'})} src={this.state.src}/> </div> ) } }

You can now push your code to git repository

Our main target is to publishing our plugin to npm create-react-library already has a feature through which we can deploy the example folder to Github pages. You just need to run the following command: Be sure run npm login to login to npm server and then run npm publish. Npm package is published now https://www.npmjs.com/package/react-profile-image-box