React Button Loader

React button with loader feature.

Install

npm install react_button_loader --save

Demo

Usage Example

React default button loader

import ButtonLoader from 'react_button_loader';

class ReactButtonLoader extends Component {
  constructor() {
    super();
    this.state = {
      toggleLoader: false
    };
  }

  render() {
    return (
      <ButtonLoader
        isLoading={this.state.toggleLoader} // Toggle loader (true/false)
        onClick={() => this.setState({ toggleLoader: !this.state.toggleLoader })}
      >
        Click Me
      </ButtonLoader>
    );
  }
}

Demo

Usage Example

React custom button loader

import ButtonLoader from 'react_button_loader';

class ReactButtonLoader extends Component {
  constructor() {
    super();
    this.state = {
      toggleLoader: false
    };
  }

  render() {
    return (
      <ButtonLoader
        width="100px"
        height="35px"
        background="#6f42c1"
        isLoading={this.state.toggleLoader} // Toggle loader (true/false)
        onClick={() => this.setState({ toggleLoader: !this.state.toggleLoader })}
      >
        Click Me
      </ButtonLoader>
    );
  }
}

Demo

Usage Example

import ButtonLoader from 'react_button_loader';

class ReactButtonLoader extends Component {
  constructor() {
    super();
    this.state = {
      toggleLoader: false
    };
  }

  render() {
    return (
      <ButtonLoader
        isLoading={this.state.toggleLoader}
        background="#c93b3b"
        loaderType= 'bouncing-ball'
        onClick={() => {
          this.setState({toggleLoader: true})
        }}
      >
        Click Me 
      </ButtonLoader>
    );
  }
}

Demo

Usage Example

import ButtonLoader from 'react_button_loader';

class ReactButtonLoader extends Component {
  constructor() {
    super();
    this.state = {
      toggleLoader: false
    };
  }

  render() {
    return (
      <ButtonLoader
        isLoading={this.state.toggleLoader}
        background="#42b5c1"
        loaderType= 'jiggling-lines'
        onClick={() => {
          this.setState({toggleLoader: true})
        }}
      >
        Click Me 
      </ButtonLoader>
    );
  }
}

PROPTYPES

| Prop | Type | Default | | ---- | ---- | ------- | | isLoading | Boolean | true | | disabled | Boolean | false | | width | String | '125px' | | height | String | '35px' | | loaderType | String | 'spinner' | | background | String | '#22b686' | | onClick | Function | () => null |

react_button_loader