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