# boxmodel-native-pinwidget

> React Native Pin Widget

Latest version **1.0.25** (published 2021-10-21) · ISC license · 0 weekly downloads

## Install

```sh
npm install boxmodel-native-pinwidget
pnpm add boxmodel-native-pinwidget
yarn add boxmodel-native-pinwidget
bun add boxmodel-native-pinwidget
```

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.25 |
| Published | 2021-10-21 |
| First published | 2021-10-11 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 40.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Boxmodel |
| Maintainers | boxmodel |

## Links

- npm: https://www.npmjs.com/package/boxmodel-native-pinwidget
- npm.io page: https://npm.io/package/boxmodel-native-pinwidget

## Recent versions

- 1.0.25 (latest) — 2021-10-21
- 1.0.24 — 2021-10-21
- 1.0.23 — 2021-10-21
- 1.0.22 — 2021-10-21
- 1.0.21 — 2021-10-20
- 1.0.20 — 2021-10-19
- 1.0.19 — 2021-10-19
- 1.0.18 — 2021-10-13
- 1.0.17 — 2021-10-13
- 1.0.16 — 2021-10-13
- 1.0.15 — 2021-10-12
- 1.0.14 — 2021-10-12
- 1.0.13 — 2021-10-12
- 1.0.12 — 2021-10-12
- 1.0.11 — 2021-10-11
- … 10 more at https://npm.io/package/boxmodel-native-pinwidget/versions

## README

**Pin-Widget for entering multidigit codes for authentication for react native.**

<div style={{display: 'flex'}}>
    <img 
        src="https://github.com/RichardsDigital/npmImages/blob/main/example_3.png" 
        width="200"
    >
</div>

❒ **Example**

    import React, { useEffect, useState } from 'react';
    import { StyleSheet, Text, View } from 'react-native';
    import PinWidget from 'boxmodel-native-pinwidget';

    export default function App() {

        const [verified, setVerified] = useState(false)
        const [error, setError] = useState(false)
        const [warningMessage, setWarningMessage] = useState('')

        useEffect(() => {
            if (error) console.log('Return to login page')
        }, [error])

        return (
            <View style={styles.container}>
                {verified ?
                    <Text>Welcome</Text>
                    :
                    <>
                        <PinWidget
                            code={'1234'}
                            numbersOnly={true}
                            maximumAttempts={3}
                            setVerified={setVerified}
                            setError={setError}
                            setWarningMessage={setWarningMessage}
                            placeholder='•'
                        />
                        <Text style={styles.warningMessage}>{warningMessage}</Text>
                    </>
                }
            </View>
        )
    }

    const styles = StyleSheet.create({
        container: {
            flex: 1,
            alignItems: 'center',
            justifyContent: 'center',
        },
        warningMessage: {
            color: 'red'
        }
    });

`code`

- Pass a `string` as a property and the component will dynamically provide the inputs for the user to confirm.

`numbersOnly` && `lettersOnly`

- Pass `true||false` to determine which keyboard will be displayed, this will also ingore ingore unmatching character types.

`maximumAttempts`

- Set the maximum attempts the user can enter a wrong code, this property will be linked to the `setVerified` and `setError` properties.

`setVerified`

- If the user inputs the correct pin then this will be set to `true`, otherwise this will be set to `false`.

`setError`

- If the user inputs the incorrect pin and exceeds the `maximumAttempts`, this will be set to `true`.

`setWarningMessage`

- Pass a state function for the component to return error messages, you can then choose where the error is displayed.

`placeholder`

- Set the placeholder for all inputs.

| Props             | Type     |
| ----------------- | -------- |
| Code              | string   |
| NumbersOnly       | boolean  |
| lettersOnly       | boolean  |
| maximumAttempts   | number   |
| setVerified       | function |
| setError          | function |
| setWarningMessage | function |
| placeholder       | string   |

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