mathieudutour/react-progress-button

This is a Simple react.js component for an inline progress indicator.

Here is the demo screenshot:

React ProgressButton Tutorial

You follow these steps to use this component:

Step 1: Install

Start by installing it via npm using the following command:

npm install react-progress-button --save

Step 2: Use it

Use it as shown with the following examples:

Controlled usage:

import ProgressButton from 'react-progress-button'

const App = React.createClass({
  getInitialState () {
    return {
      buttonState: ''
    }
  },

  render () {
    return (
      <div>
        <ProgressButton onClick={this.handleClick} state={this.state.buttonState}>
          Go!
        </ProgressButton>
      </div>
    )
  },

  handleClick () {
    this.setState({buttonState: 'loading'})
    // make asynchronous call
    setTimeout(() => {
      this.setState({buttonState: 'success'})
    }, 3000)
  }
})

Using Promises:

onClick

import ProgressButton from 'react-progress-button'

const App = React.createClass({
  render () {
    return (
      <div>
        <ProgressButton onClick={this.handleClick}>
          Go!
        </ProgressButton>
      </div>
    )
  },

  handleClick() {
    return new Promise(function(resolve, reject) {
      setTimeout(resolve, 3000)
    })
  }
});

API

Props

All props are optional. All props other than that will be passed to the top element.

controlled

true if you control the button state (by providing props.state and props.onClick).false to let the button manage its state with Promises.

classNamespace

Namespace for CSS classes, default is pb- i.e CSS classes are pb-button.

durationError

durationSuccess

onClick

onError

Function to call when going back to the normal state after an error

onSuccess

Function to call when going back to the normal state after a success

state

State of the button if you do not want to use the functions. Can be '', loading, success, error or disabled.

type

Type of the button (can be 'submit' for example).

form

Id of the form to submit (useful if the button is not directly inside the form).

shouldAllowClickOnLoading

Whether click event should bubble when in loading state

Methods

loading()

Put the button in the loading state.

disable()

Put the button in the disabled state.

notLoading(), enable()

Put the button in the normal state.

success([callback, dontGoBackToNormal])

Put the button in the success state. Call the callback or the onSuccess prop when going back to the normal state.

error([callback])

Put the button in the error state. Call the callback or the onError prop when going back to the normal state.

Styles

Look at react-progress-button.css for an idea on how to style this component.
If you are using webpack, you'll need to have css-loader installed and include

{
   test: /.css$/,
   loader: "style!css"
 }

in your webpack config. In your jsx file you can then import the CSS with import "../node_modules/react-progress-button/react-progress-button.css"; although the path depends on how deeply nested your jsx is. If you wish to theme it yourself, copy the CSS to a convenient location and point the import path at the copy, which is part of your repo, unlike the original in node_modules.

Full Example

Let us look at a full android React ProgressButton sample project.

Step 1. Write Code

Finally we need to write our code as follows:

(a). index.html

<!doctype html>
<html>
<head>
  <title>react-progress-button example</title>
  <link rel="stylesheet" href="../react-progress-button.css">
  <style>
    * {
      margin: 0;
      padding: 0;
      border: 0;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
    body {
      background: #eeefef;
      color: #0099cc;
    }
    #button-success {
      width: 200px;
      margin: 100px auto;
    }
    #button-error {
      width: 200px;
      margin: 100px auto;
    }
    #button-disabled {
      width: 200px;
      margin: 100px auto;
    }
  </style>
</head>
<body>
  <div id="app"></div>
  <script src="./app.bundle.js"></script>
</body>
</html>

(b). app.js

import React from 'react'
import ReactDOM from 'react-dom'
import ProgressButton, {STATE} from '../../lib/index'
import createReactClass from 'create-react-class'

const App = createReactClass({
  getInitialState () {
    return {
      button1State: STATE.NOTHING,
      button2State: STATE.NOTHING,
      button3State: STATE.DISABLED
    }
  },

  render () {
    return (
      <div>
        <div id='button-success'>
          <ProgressButton state={this.state.button1State} onClick={this.handleClick1}>
            Go!
          </ProgressButton>
        </div>
        <div id='button-error'>
          <ProgressButton state={this.state.button2State} onClick={this.handleClick2}>
            Go!
          </ProgressButton>
        </div>
        <div id='button-disabled'>
          <ProgressButton state={this.state.button3State}>
            Don't Go!
          </ProgressButton>
        </div>
      </div>
    )
  },

  handleClick1 () {
    this.setState({button1State: STATE.LOADING})
    // make asynchronous call
    setTimeout(() => {
      this.setState({button1State: STATE.SUCCESS})
    }, 3000)
  },

  handleClick2 () {
    this.setState({button2State: STATE.LOADING})
    // make asynchronous call
    setTimeout(() => {
      this.setState({button2State: STATE.ERROR})
    }, 3000)
  }
})

ReactDOM.render(<App />, document.getElementById('app'))

Reference

Download the code below:

No.	Link
1.	Download Full Code
2.	Read more here.
3.	Follow code author here.