Giters

sozdayka / react-native-button-spinner

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.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

react-nativereact-native-buttonreact-native-button-spinnerjavascriptspinner

react-native-button-spinner npm version

npm npm Package Quality Platform - Android and iOS MIT licensed

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

npm i react-native-button-spinner --save

Usage

  1. Import plugin
import ButtonSpinner from 'react-native-button-spinner';
  1. Add button component
<ButtonSpinner>
    My text button 1
</ButtonSpinner>
<ButtonSpinner
    disabled={true}
>
    My text button 2
</ButtonSpinner>
<ButtonSpinner
    style={{ backgroundColor: 'blue' }}
    disabled={true}
    opacityDisabled={0.1}
>
    My text button 3
</ButtonSpinner>
<ButtonSpinner
    onPress={this.myFunction}
>
    My text button 4
</ButtonSpinner>

Demo & Example

See the full source demo code in example project

Default button 

<ButtonSpinner />
<ButtonSpinner textButton={'Text Button'}/>
<ButtonSpinner>My Default Button</ButtonSpinner>
Disable button 

<ButtonSpinner disabled={true}>Default Disable btn</ButtonSpinner>
 <ButtonSpinner
		style={{ backgroundColor: 'blue' }}
		styleText={{ color: 'red' }}
		disabled={true}>Customize Disable btn</ButtonSpinner>
Callback Value Function 

<ButtonSpinner
	onPress={sendRequest}
>
	My functin use Promise
</ButtonSpinner>

<ButtonSpinner
	onPress={awaitSendRequest}
>
	Await Promise Resolve
</ButtonSpinner>

<ButtonSpinner
	onPress={awaitSendRequest}
>
	<Text style={{ color: 'orange' }}>Await response</Text>
</ButtonSpinner>

<ButtonSpinner
	onPress={awaitSendRequest}
	typeSpinner='custom'
	customSpinnerComponent={<Text style={{ color: 'red' }}>Loading</Text>}
>
	<Text style={{ color: 'green' }}>Custom spinner</Text>
</ButtonSpinner>

<ButtonSpinner
	disabled={true}
	onPress={sendRequest}
	pendingRequest={false}
	automaticTimeEnable={10000}
 >
 	<Text>Disabled btn and enable</Text>
 </ButtonSpinner>
<ButtonSpinner
 	onPress={sendRequest}
 	pendingRequest={false}
 	automaticTimeEnable={4000}
 	typeSpinner='custom'
 	customSpinnerComponent={<Text style={{ color: 'red' }}>Loading</Text>}
 >
 	<Text style={{ color: 'green' }}>Custom spinner</Text>
 </ButtonSpinner>
Position right-without-text 

<ButtonSpinner
	onPress={sendRequest}
>
	<Text>Position Left</Text>
</ButtonSpinner>

<ButtonSpinner
	positionSpinner={'right'}
	onPress={sendRequest}
>
	<Text>Position right</Text>
</ButtonSpinner>

<ButtonSpinner
	positionSpinner={'centered-over-text'}
	onPress={sendRequest}
>
	<Text>Position centered-over-text</Text>
</ButtonSpinner>

<ButtonSpinner
	positionSpinner={'centered-without-text'}
	onPress={sendRequest}
>
	<Text>Position centered-without-text</Text>
</ButtonSpinner>

<ButtonSpinner
	positionSpinner={'left-without-text'}
	onPress={sendRequest}
>
	<Text>Position left-without-text</Text>
</ButtonSpinner>

<ButtonSpinner
	positionSpinner={'right-without-text'}
	onPress={sendRequest}
>
	<Text>Position right-without-text</Text>
</ButtonSpinner>

<ButtonSpinner
	positionSpinner={'above-text'}
	onPress={sendRequest}
>
	<Text>Position above-text</Text>
</ButtonSpinner>

<ButtonSpinner
	positionSpinner={'below-text'}
	onPress={sendRequest}
>
	<Text>Position below-text</Text>
</ButtonSpinner>
Example Customize 

<ButtonSpinner
	onPress={sendRequest}
>
	<Icon name="qrcode" size={20} color="green" />
	<Text style={{ color: 'green' }}>Get QR code</Text>
</ButtonSpinner>

<ButtonSpinner
	onPress={sendRequest}
>
	<Icon name="shoppingcart" size={20} color="#900" style={{ marginRight: 10 }} />
	<Text>Add to cart</Text>
</ButtonSpinner>

<ButtonSpinner
	positionSpinner={'centered-without-text'}
	onPress={sendRequest}
>
	<Icon name="hearto" size={20} color="#900" />
</ButtonSpinner>
All the examples of functions from the demo 
  const functinReturnString = () => {
    return 'kamikadze'
  }
  const functinReturnObject = () => {
    return { a: 'kamikadze' }
  }
  const functinReturnNumber = () => {
    return 12
  }
  const sendRequest = () => {
    return new Promise(() => { })
  }
  const awaitSendRequest = () => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve("api ok")
      }, 2500)
    })
  }

Props

Reference

children

Text Button (use textButton or children)

Type Default
React Native Component (React.ReactElement) none

How to use props children:

	<ButtonSpinner>My Default Button</ButtonSpinner>

OR

	<ButtonSpinner>
		<Text>My Text</Text>
	</ButtonSpinner>

textButton

Text Button (use children or textButton)

Type Default
string My Button text

How to use props children:

 <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 
{
        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

About

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.

react-nativereact-native-buttonreact-native-button-spinnerjavascriptspinner

License:MIT License

Languages

Language:JavaScript 100.0%