react-native-button-spinner
Version:
This is a Javascript button indicator (spinner) plugin for react-native. Which will allow you to configure the indicator under or lock the button. So the plug-in stops the indicator after completing the function or interrupting it after a certain time.
548 lines (419 loc) • 11.5 kB
Markdown
# react-native-button-spinner [](https://badge.fury.io/js/react-native-button-spinner)
[](https://www.npmjs.com/package/react-native-button-spinner)
[](https://www.npmjs.com/package/react-native-button-spinner)
[](http://packagequality.com/#?package=react-native-button-spinner)
[](https://raw.githubusercontent.com/sozdayka/react-native-button-spinner/master/LICENSE)
This is a Javascript button indicator (spinner) plugin for react-native. Which will allow you to customize and disable the button. So the plug-in stops the indicator after completing the function or interrupting it after a certain time.
## Getting Started
```bash
npm i react-native-button-spinner --save
```
## Usage
1) Import plugin
```javascript
import ButtonSpinner from 'react-native-button-spinner';
```
2) Add button component
```javascript
<ButtonSpinner>
My text button 1
</ButtonSpinner>
```
```javascript
<ButtonSpinner
disabled={true}
>
My text button 2
</ButtonSpinner>
```
```javascript
<ButtonSpinner
style={{ backgroundColor: 'blue' }}
disabled={true}
opacityDisabled={0.1}
>
My text button 3
</ButtonSpinner>
```
```javascript
<ButtonSpinner
onPress={this.myFunction}
>
My text button 4
</ButtonSpinner>
```
## Demo & Example
See the full source demo code in [example project](https://github.com/sozdayka/react-native-button-spinner/tree/master/examples/ExampleProject "example project")
<details>
<summary>Default button</summary>
```javascript
<ButtonSpinner />
```
```javascript
<ButtonSpinner textButton={'Text Button'}/>
```
```javascript
<ButtonSpinner>My Default Button</ButtonSpinner>
```
</details>
<details>
<summary>Disable button</summary>
```javascript
<ButtonSpinner disabled={true}>Default Disable btn</ButtonSpinner>
```
```javascript
<ButtonSpinner
style={{ backgroundColor: 'blue' }}
styleText={{ color: 'red' }}
disabled={true}>Customize Disable btn</ButtonSpinner>
```
</details>
<details>
<summary>Callback Value Function</summary>
```javascript
<ButtonSpinner
onPress={sendRequest}
>
My functin use Promise
</ButtonSpinner>
```
```javascript
<ButtonSpinner
onPress={awaitSendRequest}
>
Await Promise Resolve
</ButtonSpinner>
```
```javascript
<ButtonSpinner
onPress={awaitSendRequest}
>
<Text style={{ color: 'orange' }}>Await response</Text>
</ButtonSpinner>
```
```javascript
<ButtonSpinner
onPress={awaitSendRequest}
typeSpinner='custom'
customSpinnerComponent={<Text style={{ color: 'red' }}>Loading</Text>}
>
<Text style={{ color: 'green' }}>Custom spinner</Text>
</ButtonSpinner>
```
```javascript
<ButtonSpinner
disabled={true}
onPress={sendRequest}
pendingRequest={false}
automaticTimeEnable={10000}
>
<Text>Disabled btn and enable</Text>
</ButtonSpinner>
```
```javascript
<ButtonSpinner
onPress={sendRequest}
pendingRequest={false}
automaticTimeEnable={4000}
typeSpinner='custom'
customSpinnerComponent={<Text style={{ color: 'red' }}>Loading</Text>}
>
<Text style={{ color: 'green' }}>Custom spinner</Text>
</ButtonSpinner>
```
</details>
<details>
<summary>Position right-without-text</summary>
```javascript
<ButtonSpinner
onPress={sendRequest}
>
<Text>Position Left</Text>
</ButtonSpinner>
```
```javascript
<ButtonSpinner
positionSpinner={'right'}
onPress={sendRequest}
>
<Text>Position right</Text>
</ButtonSpinner>
```
```javascript
<ButtonSpinner
positionSpinner={'centered-over-text'}
onPress={sendRequest}
>
<Text>Position centered-over-text</Text>
</ButtonSpinner>
```
```javascript
<ButtonSpinner
positionSpinner={'centered-without-text'}
onPress={sendRequest}
>
<Text>Position centered-without-text</Text>
</ButtonSpinner>
```
```javascript
<ButtonSpinner
positionSpinner={'left-without-text'}
onPress={sendRequest}
>
<Text>Position left-without-text</Text>
</ButtonSpinner>
```
```javascript
<ButtonSpinner
positionSpinner={'right-without-text'}
onPress={sendRequest}
>
<Text>Position right-without-text</Text>
</ButtonSpinner>
```
```javascript
<ButtonSpinner
positionSpinner={'above-text'}
onPress={sendRequest}
>
<Text>Position above-text</Text>
</ButtonSpinner>
```
```javascript
<ButtonSpinner
positionSpinner={'below-text'}
onPress={sendRequest}
>
<Text>Position below-text</Text>
</ButtonSpinner>
```
</details>
<details>
<summary>Example Customize</summary>
```javascript
<ButtonSpinner
onPress={sendRequest}
>
<Icon name="qrcode" size={20} color="green" />
<Text style={{ color: 'green' }}>Get QR code</Text>
</ButtonSpinner>
```
```javascript
<ButtonSpinner
onPress={sendRequest}
>
<Icon name="shoppingcart" size={20} color="#900" style={{ marginRight: 10 }} />
<Text>Add to cart</Text>
</ButtonSpinner>
```
```javascript
<ButtonSpinner
positionSpinner={'centered-without-text'}
onPress={sendRequest}
>
<Icon name="hearto" size={20} color="#900" />
</ButtonSpinner>
```
</details>
<details>
<summary>All the examples of functions from the demo</summary>
```javascript
const functinReturnString = () => {
return 'kamikadze'
}
```
```javascript
const functinReturnObject = () => {
return { a: 'kamikadze' }
}
```
```javascript
const functinReturnNumber = () => {
return 12
}
```
```javascript
const sendRequest = () => {
return new Promise(() => { })
}
```
```javascript
const awaitSendRequest = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve("api ok")
}, 2500)
})
}
```
</details>
[](https://snack.expo.io/@sozdayka/react-native-button-spinner)
[](https://snack.expo.io/@sozdayka/react-native-button-spinner)
## Props
- [`children`](#children)
- [`textButton`](#textbutton)
- [`disabled`](#disabled)
- [`opacity`](#opacity)
- [`opacityDisabled`](#opacitydisabled)
- [`pendingRequest`](#pendingrequest)
- [`automaticTimeEnable`](#automatictimeenable)
- [`style`](#style)
- [`styleText`](#styletext)
- [`styleSpinner`](#stylespinner)
- [`typeSpinner`](#typespinner)
- [`positionSpinner`](#positionspinner)
- [`customSpinnerComponent`](#customcpinnercomponent)
- [`onPress`](#onpress)
## Reference
### `children`
Text Button (use textButton or children)
| Type | Default |
| :-----------------: | :-----: |
| React Native Component (`React.ReactElement`) | none |
How to use props children:
```javascript
<ButtonSpinner>My Default Button</ButtonSpinner>
```
OR
```javascript
<ButtonSpinner>
<Text>My Text</Text>
</ButtonSpinner>
```
---
### `textButton`
Text Button (use children or textButton)
| Type | Default |
| :-----------------: | :-----: |
| string | My Button text |
How to use props children:
```javascript
<ButtonSpinner textButton={'Text Button'}/>
```
---
### `disabled`
Disabled button
| Type | Default |
| :-----------------: | :-----: |
| boolean | false |
---
### `opacity`
Default opacity button
| Type | Default |
| :-----------------: | :-----: |
| number | 1 |
---
### `opacityDisabled`
Default opacity button when the state is disabled
| Type | Default |
| :-----------------: | :-----: |
| number | 0.35 |
---
### `pendingRequest`
Waiting for function to complete
| Type | Default |
| :-----------------: | :-----: |
| boolean | true |
---
### `automaticTimeEnable`
Time after which the button becomes active without waiting for the function to complete after `number` second(s).
Example set 2s. `automaticTimeEnable={2000}`
| Type | Default |
| :-----------------: | :-----: |
| number | 0 |
---
### `style`
add additional styling for button component (optional)
| Type | Default |
| :-----------------: | :-----: |
| View style (object) | see code below |
```javascript
{
alignItems: 'center',
backgroundColor: 'f5f5f5',
color: '#dddddd',
paddingVertical: 10,
paddingHorizontal: 25,
margin: 10,
borderColor: '#c2c2c2',
borderRadius: 5,
borderWidth: 1,
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
}
```
---
### `styleText`
add additional styling for button text (optional)
| Type | Default |
| :-----------------: | :-----: |
| View style (object) | `{ color: '#000000' }` |
---
### `styleSpinner`
Style for button spinner if the customSpinnerComponent is not used
the sizes have the following options:
- `small`
- `large`
| Type | Default |
| :-----------------: | :-----: |
| View style (object) | `{ style: { marginRight: 15, }, color: '#a6a6a6', size: 'small' }` |
---
### `typeSpinner`
The types of the spinner (optional):
- `defaut`
- `custom`
| Type | Default |
| :-----------------: | :-----: |
| `defaut`, `custom` | defaut |
---
### `positionSpinner`
The positions of the button spinner (optional):
- `left`
- `right`
- `centered-over-text`
- `centered-without-text`
- `left-without-text`
- `right-without-text`
- `above-text`
- `below-text`
The positions of the button spinner if the customSpinnerComponent is not used.
| Type | Default |
| :-----------------: | :-----: |
| `left`, `right`, `centered-over-text`, `centered-without-text`, `left-without-text`, `right-without-text`, `above-text`, `below-text` | left |
---
### `customSpinnerComponent`
Custom button spinner component
| Type | Default |
| :-----------------: | :-----: |
| React Native Component (`React.ReactElement`) | none |
---
### `onPress`
Your function for click
| Type | Default |
| :-----------------: | :-----: |
| function | `() => {}` |
---
## License
This project is licensed under the MIT License - see the LICENSE file for details
Copyright (c) 2019 Igor Rosliakov