node package manager

@mitchallen/react-loader-button

@mitchallen/react-loader-button

LoaderButton React component

Continuous Integration Coverage Status Downloads Version License

Installation

$ npm init
$ npm install @mitchallen/react-loader-button --save

Usage

Add this line near the top of your file (like src/App.js):

import LoaderButton from '@mitchallen/react-loader-button';

See the example below for more information on how to integrate with your application.

Reference

This component is based on code found in this chapter of an online tutorial:

The table of contents for that tutorial can be found here:

Usage example

$ create-react-app react-loader-button-test
$ cd react-number-loader-button-test/
$ npm install @mitchallen/react-loader-button --save
$ npm install --save material-ui

Modify src/App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

// Must include MuiThemeProvider!
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import LoaderButton from '@mitchallen/react-loader-button';

class App extends Component {
  render() {
    return (
      <MuiThemeProvider>
        <div className="App">
          <div className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <h2>Welcome to React</h2>
          </div>
          <p className="App-intro">
            To get started, edit <code>src/App.js</code> and save to reload.
          </p>
          <h4>
            primary, disabled, isloading:
          </h4>
          <LoaderButton
            primary
            disabled={ true }
            type='submit'
            isLoading={ true }
            text='Signup'
            loadingText='Signing up …' />
          <h4>
            primary, disabled = false, isloading:
          </h4>
          <LoaderButton
            primary
            disabled={ false }
            type='submit'
            isLoading={ true }
            text='Signup'
            loadingText='Signing up …' />
          <h4>
            disabled, isloading:
          </h4>
          <LoaderButton
            disabled={ true }
            type='submit'
            isLoading={ true }
            text='Signup'
            loadingText='Signing up …' />
          <h4>
            primary, disabled = false, isloading = false:
          </h4>
          <LoaderButton
            primary
            disabled={ false }
            type='submit'
            isLoading={ false }
            text='Signup'
            loadingText='Signing up …' />
          <h4>
            disabled = false, isloading = false:
          </h4>
          <LoaderButton
            disabled={ false }
            type='submit'
            isLoading={ false }
            text='Signup'
            loadingText='Signing up …' />
          <h4>
            primary, disabled, isloading = false:
          </h4>
          <LoaderButton
            primary
            disabled={ true }
            type='submit'
            isLoading={ false }
            text='Signup'
            loadingText='Signing up …' />
          <h4>
            disabled, isloading = false:
          </h4>
          <LoaderButton
            disabled={ true }
            type='submit'
            isLoading={ false }
            text='Signup'
            loadingText='Signing up …' />
        </div>
      </MuiThemeProvider>
    );
  }
}

export default App;

Run the app

npm start

Testing

Run the Tests

To test, go to the root folder and type (sans $):

$ npm test

Cleanup

Remember to unlink when done.


Repo(s)


Contributing

In lieu of a formal style guide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code.


Version History

Version 0.1.7

  • added run: yarn add react to .circleci/config.yml

Version 0.1.6

  • installed eslint to local dev dependencies
  • react now exists only as a peer dependency

Version 0.1.5

  • Added examples folder and example

Version 0.1.4

  • Removed internal value and mode setting from indicator

Version 0.1.3

  • Removed react-bootstrap dependency
  • Spinning button indicator now comes from material-ui

Version 0.1.2

  • Updated documentation

Version 0.1.1

  • Updated documentation

Version 0.1.0

  • initial release