react_button_loader
v2.0.0
Published
Button loader for Reactjs
Downloads
3
Maintainers
Readme
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 |