:cyclone: Simple react.js component for an inline progress indicator

Overview

react-progress-button

build status npm version Dependency Status devDependency Status

Simple React component for a circular Progress Button.

Demo

Demo

Install

npm install react-progress-button --save

Example

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)
  }
})

Source

Using Promises:

If the function passed in via the onClick prop return a Promise or if a promise is passed as an argument of the loading method, the component will automatically transition to its success or error states based on the outcome of the Promise without the need for external manipulation of state using a ref.

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)
    })
  }
});

Source

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

Duration (ms) before going back to normal state when an error occurs, default is 1200

durationSuccess

Duration (ms) before going back to normal state when an success occurs, default is 500

onClick

Function to call when the button is clicked; if it returns a Promise then the component will transition to the success/error state based on the outcome of the Promise

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.

License

MIT

Issues
  • clickable on loading

    clickable on loading

    Hi. I get noticed that button is clickable and event fires once again in loading state

    bug 
    opened by luckyraul 8
  • React.createClass is deprecated

    React.createClass is deprecated

    ProgressButton: React.createClass is deprecated and will be removed in version 16. Use plain JavaScript classes instead. If you're not yet ready to migrate, create-react-class is available on npm as a drop-in replacement.

    opened by luckyraul 4
  • Added support for Promises in `onClick` prop

    Added support for Promises in `onClick` prop

    Often if a button triggers an asyncronous action, the handler will return a Promise that is resolved if successful or rejected if unsuccessful. This component can make use of this Promise to automatically update it's state without relying on external state management through the use of refs, which should cut down on boilerplate code in many cases.

    opened by dylansmith 4
  • How to change the height and the background color ?

    How to change the height and the background color ?

    How to change the Height and the background color ? even if I change the style it is not getting impacted also the color is coming as black instead of blue as shown in demo.

               <ProgressButton 
                    onClick={this.onClick} 
                    state={this.props.progressState}
                    style={{width: '200px', height: '20px', "font-size": '8px'}}
                    >
                Populate Results
                </ProgressButton>
    

    image

    success and error colors are shown properly.

    opened by ashishdhyani 3
  • Remove `onSuccess` from root div props

    Remove `onSuccess` from root div props

    Latest react will complain about having unknown props on divs

    opened by tungv 3
  • CSS isn't loaded

    CSS isn't loaded

    I installed the progress button as documented here and it looks ridiculous, because it is completely unstyled.

    If I manually add the stylesheet to my site in devtools, the button works.

    opened by MyrionPhoenixmoon 3
  • fix loading logic

    fix loading logic

    If onClick() prop doesn't return promise, the button will stay in loading state forever; additionally provide error object in handler

    opened by xakep139 3
  • Can't prevent callback from triggered twice when double clicked

    Can't prevent callback from triggered twice when double clicked

    When I double click, the callback is triggered twice and there is no way to to prevent it from happening.

    I have tried to set the button state to disabled upon clicking but double click still trigger the callback twice.

    opened by rutsoluo 3
  • “Invariant Violation: Element type is invalid:

    “Invariant Violation: Element type is invalid:"

    I've got messages, when require ("react-progress-button") and add to my component this variable.

    Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of UploadSection. Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of UploadSection.

    What could be the problem???

    opened by Coffee-Tea 3
  • click allowed on button text when state=

    click allowed on button text when state="disabled" if controlled

    First thank you for this great component that I use in many projects.

    In the current project I work on this button is used in a form.

    I control this button mainly via methods (using <ProgressButton> ref) like success() or error(). However I am also using the state prop which I set to "disabled" until all the form fields are valid, therefore I set the controlled prop to true.

    When I do this, when the button is in disabled state the click on the inside of <ProgressButton> (underlying span element ("Go !" text)) goes through, even if the cursor correctly shows disabled icon. Clicks within button but outside "Go !" text are correctly blocked.

    If I unset the controlled prop all the clicks are correctly blocked in disabled state.

    I can provide an example in codesandbox if you want.

    edit : I edited the issue as it seems only the click on underlying span element ("Go !" text) goes through (no click event received if clicking left or right part of the button), but I will try to reproduce an example on codesandbox because that might be a CSS issue on my side as I tweaked the pointer-events property in the form, will check that.

    bug 
    opened by didrip 3
  • Add dontReenableAfterSuccess prop to support other default states bes…

    Add dontReenableAfterSuccess prop to support other default states bes…

    …ides enabled

    There seems to be a bug where the currentState state value and the state prop fall out of sync. This manifested itself in my project when the default state of the button (what it should get set to after success according to the onSuccess prop) is something other than ''.

    The code already partially supports not automatically setting the button to enabled after success. This PR adds a prop which can be used to configure this. I tested this in my project and it works as expected when my code sets the button state to 'disabled' after success.

    opened by codylieu 4
  • option to keep button in error state

    option to keep button in error state

    This allows to force the button in error state (does no go back to NOTHING state after timeout durationError).

    Can be useful in case the error is not recoverable (no need to re-click the button).

    opened by didrip 0
  • Unexpected token

    Unexpected token

    ERROR in ./node_modules/react-progress-button/src/index.js 95:6 Module parse failed: Unexpected token (95:6) You may need an appropriate loader to handle this file type. Can anyone fix them to me. Tks you.

    opened by DatNguyen0708 0
  • Not working at my end

    Not working at my end

    Hello there, i added this dependency at my end yarn add react-progess-button not working i did same code as it shown in repo need a help how to do this ?

    opened by pranaydp 2
  • Create easily styled components

    Create easily styled components

    Create easily styled button component using props and styled-components.

    Introduce four new props for styling elements: size => Set the height of button and also setting width and height of svg loading element radius => Set button border radius theme => Set color theme for button fontSize => Set fontSize for button text.

    Link to demo

    opened by HackAfro 0
  • Very difficult to override the default styles

    Very difficult to override the default styles

    It's very difficult to override the default styling. Had to directly edit the default styles so I don't break it.

    opened by HackAfro 0
  • "this.props.state" did not clear

    I code this.setState({buttonState: 'error'}); It works. I can inspect this.state.currentState goes as ""->"loading"->"error"->"" But this.props.state goes as ""->"error", it freezed at "error"

    opened by Ding-Fan 0
  • Bug on IE11

    Bug on IE11

    There's a pretty annoying bug on IE 11 where the spinner svg path is outside of the button.

    http://codepen.io/anon/pen/BzEQrW

    opened by allenylzhou 5
  • Do not work properly on MS Edge

    Do not work properly on MS Edge

    Animation is not spinning circle while searchButtonState is 'loading' and it causes scrollbars pulsing too

    opened by hrocho 6
Loading Bar (aka Progress Bar) for Redux and React

React Redux Loading Bar A React component that provides Loading Bar (aka Progress Bar) for long running tasks. Consists of: React component — displays

Anton Mironov 914 Sep 20, 2021
3D animated react button component with progress bar.

3D animated react button component with progress bar.

MD. Ariful Alam 68 Oct 5, 2021
❄️ The ultimate Line Progress Bar UI for React - Supports 🌸 Natural color gradients & ☃️ Coherent border rounding

Frogress ❄️ The ultimate Line Progress Bar UI for React @frogress/line ?? Installation # Install peer depedencies yarn add react react-dom styled-comp

Junho Yeo 12 Sep 6, 2021
Creates a download handler function and gives progress information

Creates a download handler function and gives progress information

Olavo Parno 57 Sep 15, 2021
Easy way to block the user from interacting with your UI.

react-block-ui Easy way to block the user from interacting with your UI. About This library contains easy to use components to prevent the user from i

Availity 271 Sep 13, 2021
Make beautiful, animated loading skeletons that automatically adapt to your app.

react-loading-skeleton Make beautiful, animated loading skeletons that automatically adapt to your app. Basic usage Install by npm/yarn with react-loa

David Tang 2.4k Oct 13, 2021
Amazing collection of React spinners components with pure css

React Spinners CSS Loaders (Vue, Angular) Amazing collection of React spinners components with pure css. The React spinners are based on loading.io an

Josh Kuttler 274 Sep 24, 2021
react-loader - React component that displays a spinner via spin.js until your component is loaded.

react-loader react-loader provides your React.js component a simple mechanism for rendering a loading spinner (via spin.js) while data is loading, suc

Cognizant Studio 529 Sep 16, 2021
⚪ SVG-Powered component to easily create skeleton loadings.

SVG-Powered component to easily create placeholder loadings (like Facebook's cards loading). Features ⚙️ Customizable: Feel free to change the colors,

Danilo Woznica 11.6k Oct 13, 2021
A collection of loading spinner components for react

React Spinners A collection of loading spinners with React.js based on Halogen. This package is bootstraped using react-npm-boilerplate Demo Demo Page

David Hu 2k Oct 12, 2021
A collection of loading indicators animated with CSS for React

react-spinkit A collection of loading indicators animated with CSS for React Currently I've ported all the spinner animations from Spinkit. If you hav

Kyle Mathews 1.4k Oct 2, 2021