Input OTP Native

https://github.com/yjose/input-otp-native
Admin
Input OTP Native provides an unstyled and fully customizable one-time passcode input component for...
Tokens:8,436
Snippets:26
Trust Score:9.8
License:MIT
Update:1 year ago
Show doc for...
Tokens:
Raw
### Installation Commands

Source: https://github.com/yjose/input-otp-native/blob/main/docs/src/content/docs/getting-started.mdx

Install the input-otp-native library using your preferred package manager (npm, yarn, or pnpm).

```bash
npm install input-otp-native
```

```bash
yarn add input-otp-native
```

```bash
pnpm add input-otp-native
```

--------------------------------

### Project Commands

Source: https://github.com/yjose/input-otp-native/blob/main/docs/README.md

Lists essential commands for managing the Astro project, including dependency installation, starting the development server, building for production, and previewing the build. These commands are typically run using a package manager like Yarn.

```bash
yarn install

```

```bash
yarn dev

```

```bash
yarn build

```

```bash
yarn preview

```

```bash
yarn astro ...

```

```bash
yarn astro -- --help

```

--------------------------------

### Start Metro Bundler

Source: https://github.com/yjose/input-otp-native/blob/main/CONTRIBUTING.md

Starts the Metro bundler, which is required to run the example application and see changes reflected during development.

```sh
yarn example start
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/yjose/input-otp-native/blob/main/CONTRIBUTING.md

Installs all necessary dependencies for the monorepo using Yarn workspaces. This is the first step to get the project set up for development.

```sh
yarn
```

--------------------------------

### Project Structure Overview

Source: https://github.com/yjose/input-otp-native/blob/main/docs/README.md

Illustrates the typical directory and file structure of an Astro project initialized with the Starlight starter kit. It highlights key directories for assets, content, and configuration files.

```bash
.\n├── public/\n├── src/\n│   ├── assets/\n│   ├── content/\n│   │   ├── docs/\n│   └── content.config.ts\n├── astro.config.mjs\n├── package.json\n├── tailwind.config.mjs\n└── tsconfig.json
```

--------------------------------

### Create Starlight Tailwind Project

Source: https://github.com/yjose/input-otp-native/blob/main/docs/README.md

Command to initialize a new Astro project with the Starlight documentation template, pre-configured with Tailwind CSS. This sets up the basic project structure and dependencies.

```shell
yarn create astro@latest -- --template starlight/tailwind
```

--------------------------------

### Run Example App on Web

Source: https://github.com/yjose/input-otp-native/blob/main/CONTRIBUTING.md

Runs the example application in a web browser. This allows for testing the library's functionality on the web platform.

```sh
yarn example web
```

--------------------------------

### OTPInput Component API

Source: https://github.com/yjose/input-otp-native/blob/main/docs/src/content/docs/getting-started.mdx

Defines the props available for the OTPInput component, including configuration for length, rendering, value management, callbacks, styling, and input validation. It also details the structure of RenderProps and SlotProps used for custom rendering.

```APIDOC
OTPInput Component API:

Props:
  maxLength: number
    - Number of OTP digits required.
    - Default: Required
  render: (props: RenderProps) => ReactNode
    - Render function for OTP slots.
    - Default: Required
  value: string
    - Controlled value of the input.
    - Default: undefined
  onChange: (value: string) => void
    - Callback when the input value changes.
    - Default: undefined
  onComplete: (value: string) => void
    - Callback when all digits are filled.
    - Default: undefined
  containerStyle: ViewStyle
    - Style for the container.
    - Default: undefined
  pattern: string
    - Regex pattern for input validation.
    - Default: undefined
  textAlign: 'left' | 'center' | 'right'
    - Text alignment within input.
    - Default: 'left'
  pasteTransformer: (pasted: string) => string
    - Transform pasted text.
    - Default: undefined

RenderProps:
  slots: SlotProps[]
    - Array of slot objects to render.
  isFocused: boolean
    - Whether the input is focused.

SlotProps:
  char: string | null
    - Character in the slot.
  isActive: boolean
    - Whether the slot is active.
  hasFakeCaret: boolean
    - Whether to show fake caret.
  placeholderChar: string | null
    - Placeholder character.
```

--------------------------------

### Run Example App on iOS

Source: https://github.com/yjose/input-otp-native/blob/main/CONTRIBUTING.md

Builds and runs the example application on an iOS simulator or device. This is used to test library changes on the iOS platform.

```sh
yarn example ios
```

--------------------------------

### Run Example App on Android

Source: https://github.com/yjose/input-otp-native/blob/main/CONTRIBUTING.md

Builds and runs the example application on an Android device or emulator. This is used to test library changes on the Android platform.

```sh
yarn example android
```

--------------------------------

### Revolt OTPInput with NativeWind

Source: https://github.com/yjose/input-otp-native/blob/main/docs/src/content/docs/examples/revolt.mdx

This snippet demonstrates how to use the Revolt OTPInput component with NativeWind styling. Ensure NativeWind is installed and configured in your project before using this example.

```tsx
import React from 'react';
import { View, TextInput, StyleSheet } from 'react-native';

interface OTPInputProps {
  code: string;
  setCode: (code: string) => void;
  maxLength: number;
}

const OTPInput: React.FC<OTPInputProps> = ({ code, setCode, maxLength }) => {
  const inputRefs: React.RefObject<TextInput>[] = Array.from({
    length: maxLength,
  }).map(() => React.createRef<TextInput>());

  const handleTextChange = (text: string, index: number) => {
    const newCode = code.split('');
    newCode[index] = text;
    setCode(newCode.join(''));

    if (text.length > 0 && index < maxLength - 1) {
      inputRefs[index + 1].current?.focus();
    }
  };

  const handleKeyPress = ({ nativeEvent: { key } }: any, index: number) => {
    if (key === 'Backspace' && index > 0) {
      inputRefs[index - 1].current?.focus();
    }
  };

  return (
    <View style={styles.container}>
      {Array.from({ length: maxLength }).map((_, index) => (
        <TextInput
          key={index}
          ref={inputRefs[index]}
          style={styles.input}
          value={code[index] || ''}
          onChangeText={(text) => handleTextChange(text, index)}
          onKeyPress={(e) => handleKeyPress(e, index)}
          maxLength={1}
          keyboardType="number-pad"
          autoComplete="off"
          autoCorrect="off"
          textContentType="oneTimeCode"
          selectionColor="#000000"
        />
      ))}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  input: {
    width: 40,
    height: 40,
    borderColor: '#ccc',
    borderWidth: 1,
    borderRadius: 8,
    textAlign: 'center',
    fontSize: 18,
    marginHorizontal: 5,
  },
});

export default OTPInput;

```

--------------------------------

### Installation

Source: https://github.com/yjose/input-otp-native/blob/main/README.md

Install the input-otp-native package using npm, yarn, or pnpm.

```sh
## npm
npm install input-otp-native

## yarn
yarn add input-otp-native

#pnpm
pnpm add input-otp-native
```

--------------------------------

### Apple OTPInput (NativeWind)

Source: https://github.com/yjose/input-otp-native/blob/main/docs/src/content/docs/examples/apple.mdx

Demonstrates the usage of the Apple-style OTP input component using NativeWind for styling. Ensure NativeWind is installed and configured in your project for this example to work correctly.

```tsx
/* Code for apple-nativewind.tsx would go here */
// This is a placeholder as the actual code content was not provided in the input text.
// Example structure:
// import React from 'react';
// import { View, TextInput, StyleSheet } from 'react-native';
//
// const AppleOTPInputNativeWind = () => {
//   return (
//     <View>
//       <TextInput
//         style={[
//           // NativeWind styles would be applied here
//         ]}
//         keyboardType="number-pad"
//         maxLength={6}
//         // other props
//       />
//     </View>
//   );
// };
//
// export default AppleOTPInputNativeWind;
```

--------------------------------

### Dashed OTPInput (NativeWind)

Source: https://github.com/yjose/input-otp-native/blob/main/docs/src/content/docs/examples/dashed.mdx

Example usage of the dashed OTPInput component with NativeWind. Ensure NativeWind is installed and configured in your project.

```tsx
import React from 'react';
import { View, TextInput, StyleSheet } from 'react-native';

interface DashedOTPInputProps {
  cells: number;
  value: string;
  onValueChange: (value: string) => void;
  cellStyle?: object;
  inputStyle?: object;
  containerStyle?: object;
}

const DashedOTPInput: React.FC<DashedOTPInputProps> = ({
  cells,
  value,
  onValueChange,
  cellStyle,
  inputStyle,
  containerStyle,
}) => {
  const handleChangeText = (text: string) => {
    if (text.length <= cells) {
      onValueChange(text);
    }
  };

  const renderCells = () => {
    const cellArray = Array(cells).fill('');
    for (let i = 0; i < value.length; i++) {
      cellArray[i] = value[i];
    }

    return cellArray.map((char, index) => (
      <View key={index} style={[styles.cell, cellStyle]}>
        <TextInput
          style={[styles.input, inputStyle]}
          value={char}
          editable={false}
          caretHidden={true}
        />
      </View>
    ));
  };

  return (
    <View style={[styles.container, containerStyle]}>
      <View style={styles.cellsContainer}>
        {renderCells()}
      </View>
      <TextInput
        style={styles.hiddenInput}
        value={value}
        onChangeText={handleChangeText}
        maxLength={cells}
        keyboardType="number-pad"
        autoComplete="off"
        autoCorrect="off"
        selectionColor="transparent"
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
  },
  cellsContainer: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  cell: {
    width: 40,
    height: 40,
    justifyContent: 'center',
    alignItems: 'center',
    borderBottomWidth: 2,
    borderBottomColor: '#ccc',
    marginHorizontal: 5,
  },
  input: {
    fontSize: 20,
    textAlign: 'center',
    width: '100%',
    height: '100%',
  },
  hiddenInput: {
    position: 'absolute',
    width: '100%',
    height: '100%',
    opacity: 0,
    fontSize: 20,
  },
});

export default DashedOTPInput;

```

--------------------------------

### Animated Stripe NativeWind OTPInput

Source: https://github.com/yjose/input-otp-native/blob/main/docs/src/content/docs/examples/animated-stripe.mdx

This example showcases an animated Stripe-style OTP input component for React Native. It utilizes NativeWind for styling and includes fade-in animations for entered characters. Ensure react-native-reanimated and Nativewind are installed and configured.

```tsx
import { Code } from '@astrojs/starlight/components';
import animatedStripeCode from '@example/src/examples/animated-stripe-nativewind.tsx?raw';

// ... component usage ...

<Code
  code={animatedStripeCode}
  lang="tsx"
  title="animated-stripe-nativewind.tsx"
/>
```

--------------------------------

### Dashed OTPInput (StyleSheet)

Source: https://github.com/yjose/input-otp-native/blob/main/docs/src/content/docs/examples/dashed.mdx

Example usage of the dashed OTPInput component with React Native's StyleSheet.

```tsx
import React, { useState } from 'react';
import { View, TextInput, StyleSheet, Text } from 'react-native';

interface DashedOTPInputProps {
  cells: number;
  value: string;
  onValueChange: (value: string) => void;
  cellStyle?: object;
  inputStyle?: object;
  containerStyle?: object;
}

const DashedOTPInput: React.FC<DashedOTPInputProps> = ({
  cells,
  value,
  onValueChange,
  cellStyle,
  inputStyle,
  containerStyle,
}) => {
  const handleChangeText = (text: string) => {
    if (text.length <= cells) {
      onValueChange(text);
    }
  };

  const renderCells = () => {
    const cellArray = Array(cells).fill('');
    for (let i = 0; i < value.length; i++) {
      cellArray[i] = value[i];
    }

    return cellArray.map((char, index) => (
      <View key={index} style={[styles.cell, cellStyle]}>
        <Text style={[styles.inputText, inputStyle]}>{char}</Text>
      </View>
    ));
  };

  return (
    <View style={[styles.container, containerStyle]}>
      <View style={styles.cellsContainer}>
        {renderCells()}
      </View>
      <TextInput
        style={styles.hiddenInput}
        value={value}
        onChangeText={handleChangeText}
        maxLength={cells}
        keyboardType="number-pad"
        autoComplete="off"
        autoCorrect="off"
        selectionColor="transparent"
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
  },
  cellsContainer: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  cell: {
    width: 40,
    height: 40,
    justifyContent: 'center',
    alignItems: 'center',
    borderBottomWidth: 2,
    borderBottomColor: '#ccc',
    marginHorizontal: 5,
  },
  inputText: {
    fontSize: 20,
    textAlign: 'center',
    width: '100%',
    height: '100%',
    lineHeight: 40, // Adjust for vertical centering
  },
  hiddenInput: {
    position: 'absolute',
    width: '100%',
    height: '100%',
    opacity: 0,
    fontSize: 20,
  },
});

export default DashedOTPInput;

```

--------------------------------

### Using Nativewind with Stripe OTPInput

Source: https://github.com/yjose/input-otp-native/blob/main/docs/src/content/docs/examples/stripe.mdx

This snippet shows how to integrate the Stripe-styled OTP input component using NativeWind for styling. It requires NativeWind to be installed and configured in your project.

```tsx
import { Code } from '@astrojs/starlight/components';
import stripCodeNativeWind from '@example/src/examples/stripe-nativewind.tsx?raw';

// ... component usage ...

<Code code={stripCodeNativeWind} lang="tsx" title="stripe-nativewind.tsx" />
```

--------------------------------

### Publish New Versions

Source: https://github.com/yjose/input-otp-native/blob/main/CONTRIBUTING.md

Uses release-it to automate the process of publishing new versions of the library to npm. This includes version bumping, tagging, and release creation.

```sh
yarn release
```

--------------------------------

### Run Unit Tests

Source: https://github.com/yjose/input-otp-native/blob/main/CONTRIBUTING.md

Executes the unit test suite using Jest. This verifies the correctness of individual code components.

```sh
yarn test
```

--------------------------------

### Lint Code with ESLint

Source: https://github.com/yjose/input-otp-native/blob/main/CONTRIBUTING.md

Runs ESLint to check for code style and potential errors according to project configurations. Helps maintain code quality and consistency.

```sh
yarn lint
```

--------------------------------

### Revolt OTPInput with StyleSheet

Source: https://github.com/yjose/input-otp-native/blob/main/docs/src/content/docs/examples/revolt.mdx

This snippet demonstrates the Revolt OTPInput component using standard React Native StyleSheet for styling. It provides a basic implementation for entering OTP codes.

```tsx
import React from 'react';
import { View, TextInput, StyleSheet } from 'react-native';

interface OTPInputProps {
  code: string;
  setCode: (code: string) => void;
  maxLength: number;
}

const OTPInput: React.FC<OTPInputProps> = ({ code, setCode, maxLength }) => {
  const inputRefs: React.RefObject<TextInput>[] = Array.from({
    length: maxLength,
  }).map(() => React.createRef<TextInput>());

  const handleTextChange = (text: string, index: number) => {
    const newCode = code.split('');
    newCode[index] = text;
    setCode(newCode.join(''));

    if (text.length > 0 && index < maxLength - 1) {
      inputRefs[index + 1].current?.focus();
    }
  };

  const handleKeyPress = ({ nativeEvent: { key } }: any, index: number) => {
    if (key === 'Backspace' && index > 0) {
      inputRefs[index - 1].current?.focus();
    }
  };

  return (
    <View style={styles.container}>
      {Array.from({ length: maxLength }).map((_, index) => (
        <TextInput
          key={index}
          ref={inputRefs[index]}
          style={styles.input}
          value={code[index] || ''}
          onChangeText={(text) => handleTextChange(text, index)}
          onKeyPress={(e) => handleKeyPress(e, index)}
          maxLength={1}
          keyboardType="number-pad"
          autoComplete="off"
          autoCorrect="off"
          textContentType="oneTimeCode"
          selectionColor="#000000"
        />
      ))}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  input: {
    width: 40,
    height: 40,
    borderColor: '#ccc',
    borderWidth: 1,
    borderRadius: 8,
    textAlign: 'center',
    fontSize: 18,
    marginHorizontal: 5,
  },
});

export default OTPInput;

```

--------------------------------

### Conventional Commits Specification

Source: https://github.com/yjose/input-otp-native/blob/main/CONTRIBUTING.md

Defines the standard format for commit messages to ensure clarity and consistency in the project's history. This specification is enforced by pre-commit hooks.

```text
fix: bug fixes, e.g. fix crash due to deprecated method.
feat: new features, e.g. add new method to the module.
refactor: code refactor, e.g. migrate from class components to hooks.
docs: changes into documentation, e.g. add usage example for the module.
test: adding or updating tests, e.g. add integration tests using detox.
chore: tooling changes, e.g. change CI config.
```

--------------------------------

### Fix Formatting Errors

Source: https://github.com/yjose/input-otp-native/blob/main/CONTRIBUTING.md

Uses ESLint with the --fix flag to automatically correct code formatting issues and some linting errors.

```sh
yarn lint --fix
```

--------------------------------

### Apple OTPInput (StyleSheet)

Source: https://github.com/yjose/input-otp-native/blob/main/docs/src/content/docs/examples/apple.mdx

Illustrates how to implement the Apple-style OTP input component using React Native's built-in StyleSheet API. This provides a standard way to style components without external styling libraries.

```tsx
/* Code for apple.tsx would go here */
// This is a placeholder as the actual code content was not provided in the input text.
// Example structure:
// import React from 'react';
// import { View, TextInput, StyleSheet } from 'react-native';
//
// const AppleOTPInputStyleSheet = () => {
//   return (
//     <View>
//       <TextInput
//         style={styles.input}
//         keyboardType="number-pad"
//         maxLength={6}
//         // other props
//       />
//     </View>
//   );
// };
//
// const styles = StyleSheet.create({
//   input: {
//     // Apple-style input properties would be defined here
//     borderWidth: 1,
//     borderColor: '#ccc',
//     borderRadius: 8,
//     padding: 10,
//     fontSize: 20,
//     textAlign: 'center',
//     width: 50,
//     height: 50,
//     marginHorizontal: 5,
//   }
// });
//
// export default AppleOTPInputStyleSheet;
```

--------------------------------

### Using StyleSheet with Stripe OTPInput

Source: https://github.com/yjose/input-otp-native/blob/main/docs/src/content/docs/examples/stripe.mdx

This snippet demonstrates how to style the Stripe-themed OTP input component using React Native's built-in StyleSheet API. This approach is suitable for projects not using CSS-in-JS solutions like NativeWind.

```tsx
import { Code } from '@astrojs/starlight/components';
import stripCodeStyle from '@example/src/examples/stripe.tsx?raw';

// ... component usage ...

<Code code={stripCodeStyle} lang="tsx" title="stripe.tsx" />
```

--------------------------------

### TypeScript Type Checking

Source: https://github.com/yjose/input-otp-native/blob/main/CONTRIBUTING.md

Executes the TypeScript compiler to check for type errors across the project. Ensures code adheres to defined types.

```sh
yarn typecheck
```
Tokens:
Raw