# codepin

> this is a react-native component for a implements a code pin view in your project.

Latest version **0.0.6** (published 2018-12-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install codepin
pnpm add codepin
yarn add codepin
bun add codepin
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.6 |
| Published | 2018-12-11 |
| First published | 2018-12-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 18.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 7 |
| Author | Meslien Jonathan |
| Maintainers | meslienjonathan |
| Keywords | react-native, react, codePin, react-native-code-pin, code, ios, android |

## Links

- npm: https://www.npmjs.com/package/codepin
- Repository: https://github.com/meslienjonathan/react-native-code-pin
- Issues: https://github.com/meslienjonathan/react-native-code-pin/issues
- npm.io page: https://npm.io/package/codepin

## Dependencies (3)

- [react](https://npm.io/package/react.md) 16.6.1
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.2
- [react-native](https://npm.io/package/react-native.md) 0.57.5

## Alternatives

- [flatbuffers](https://npm.io/package/flatbuffers.md) — 6.0M weekly downloads
- [jwt-simple](https://npm.io/package/jwt-simple.md) — 259.5K weekly downloads
- [@exodus/patch-broken-hermes-typed-arrays](https://npm.io/package/@exodus/patch-broken-hermes-typed-arrays.md) — 28.5K weekly downloads
- [@native-to-anchor/buffer-layout](https://npm.io/package/@native-to-anchor/buffer-layout.md) — 12.2K weekly downloads
- [binary-parser-encoder](https://npm.io/package/binary-parser-encoder.md) — 5.3K weekly downloads

## Recent versions

- 0.0.6 (latest) — 2018-12-11
- 0.0.5 — 2018-12-09
- 0.0.4 — 2018-12-09
- 0.0.3 — 2018-12-07
- 0.0.2 — 2018-12-06
- 0.0.1 — 2018-12-06

## README

# react-native-code-pin

 ![License](https://img.shields.io/badge/license-MIT-blue.svg) ![npm Version](https://img.shields.io/npm/v/codepin.svg) ![npm Downloads](https://img.shields.io/npm/dt/codepin.svg)<br>
_This is a react-native component for a implements a code pin view in your project_<br>

_Attention: This package is under development and evolution over time_<br>
_Contributions are welcome!_<br>


<p align='center'><img src='http://image.noelshack.com/fichiers/2018/49/5/1544147090-2odf01.gif' alt='PinCode'><img src='http://image.noelshack.com/fichiers/2018/49/5/1544147084-2odf1a.gif' alt='PinCode2'>
<img src='http://image.noelshack.com/fichiers/2018/49/7/1544394791-2okh6y.gif' alt='PinCode3'></p>


## Installation

```
npm install --save pincode
```
or
```
yarn add pincode
```

## Basic Usage

Basic usage requires Code and Size.
* _**Size**_ : requires the size of the code 

```jsx
import PinCode from 'pincode'

<PinCode Size={4} />
```

## Options

| Key | Description | Required | Default | Type |
|---|---|---|---|---|
|**`ForgetText`**|Change the text of the forget method |`false`|`forget`|`string`|
|**`ForgetMethod`**|take as a parameter a function to execute when forget is called|`false`|`() => (console.log('forget')`|`func`|
|**`Size`**|is a size of the code |`true`|`4`|`number`|
|**`Random`**|return the keyboard keys randomly|`false`|`false`|`boolean`|
|**`eventCode`**|is a function that takes in parameter the password typed by the user, a error function and a loading function|???| `(event, error, loading) => {}`|`func`|

## Example

basic use of **eventCode** prop
```jsx
...
import PinCode from 'pincode'

export default Example extends Component {
  ...
  checkCode = (event, loading, error) => {
    if(event == 'this.state.YourCode'){
      loading(true);
      setTimeout(() => {
          loading(false)
      }, 5000);
    } else {
      error();
    }
  }
  
  render(){
    return (
        <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}> 
          <PinCode Size={4} eventCode={this.checkCode}/>
        </View>
    )
  }
}
```

## Utilisation

* _**eventCode(event, error, loading)**_<br>
* _**`event()`**_ return the code entered by the user<br>
* _**`error()`**_ clear the animation<br>
* _**`loading(value)`**_ stop the loading animation value by default egal false


## Styles

| Key | Description | Default | Type |
|---|---|---|---|
|**`TextColor`**|change color of the keyboard text|`'#5262F3'`|`string`|
|**`BorderColor`**|change color of the Keyboard border|`'rgba(0,0,0,0.1)'`|`string`|
|**`PinColor`**|Change color of the pin code |`turquoise`|`string`|
|**`FontSize`**|sets the font size|`30`|`number`|
|**`CodeColor`**|is an array of the different colors of the animation|`['#EB5088', '#72C1FA', '#F5D679', '#76ECC9', '#5468F3', 'red']`|`arrayOf(string)`|
|**`ImageSize`**|size of the icon|`{height: 15, width:20}`|`object(height, width)`|
|**`ImageLocation`**|link to the icon|`require('./assets/icons/backspace-arrow.png')`|`any`|

---
_Source: https://npm.io/package/codepin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._