2.0.0 • Published 5 years ago
react_button_loader v2.0.0
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 |