react-native-custom-pin-code

Custom pin code for React-Native

Usage no npm install needed!

<script type="module">
  import reactNativeCustomPinCode from 'https://cdn.skypack.dev/react-native-custom-pin-code';
</script>

README

React Native Custom Pin Code

Simple realization with some custom styles (left element, right element near the zero button and some bottom button, for example 'Exit'), complete/clear callback, etc.

a simple example

Installation

$ npm install --save react-native-custom-pin-code

Usage

import { CustomPincode } from 'react-native-custom-pin-code';

All parameters are optional.

Basic Usage

<CustomPincode
  completeCallback={(inputtedPin, callbackClear) => {
   if (inputtedPin === actualPin) {
    return goToFinish() 
  }
  
  // If you want clear your pincode data
  callbackClear()
 }}
/>

Props

Prop Type Default Description Required
completeCallback function () => {} Callback is triggered when your pinLength === number of clicks buttons from 0 to 9 (or when all points are active :D) first argument - your pin code, second argument - method to clear points and state this lib (pin values) No
pinLength number 4 Pin length your pin code (default 4). Buttons (0...9) pressed length === Pin length, then completeCallback No
pointsLength number 4 Points length (default 4). If this prop is not passed, then points have length from pinLength prop No
pointsStyle object {} Styles for points container No
pointStyle object {} Styles for point No
pointActiveStyle object {} Styles for active points No
keyPoints string pin-buttons Key for map array of points (0...pointsLength) for some cases No
isPinError boolean false Responsible for displaying error points styles No
errorPointStyles object {} Styles for every point with isPinError (true) prop No
leftElement element null JSX left element in the last row No
leftElementCallback function () => {} Callback for left element No
isLeft boolean false Responsible for displaying left element No
leftButtonStyle object {} Styles for left button No
leftContainerStyle object {} Styles for left container No
rightElement element null JSX right element in the last row No
rightElementCallback function () => {} Callback for right element No
rightContainerStyle object {} Styles for right container No
isRight boolean false Responsible for displaying right element No
rightButtonStyle object {} Styles for right button No
bottomElement element null JSX bottom element No
bottomCallback object {} Styles for bottom button No
bottomElementStyle object {} Styles for bottom button No
isBottom boolean false Responsible for displaying bottom element No
pinButtonStyle object {} Styles for buttons (pins) 0...9 buttons No
isDeleteButton boolean false Responsible for displaying delete button (Priority higher than isLeft or isRight props) No
buttonDeleteElement element null JSX button delete element in the last row No
buttonDeletePosition string null Position delete button in the last row No
pinContainerStyles object {} Styles for pin code container without bottom element No
containerStyles object {} Styles for pin code container with bottom element (Higher than pin code container styles) No
zeroButtonStyle object {} Styles for the zero (0) button No
keyButtons string pin-buttons Key for map array of buttons (0...9) for some cases No

Built With

License

This project is licensed under the MIT License - see the LICENSE.md file for details