React OTP Input

Современный, настраиваемый компонент для ввода OTP (One-Time Password) в React приложениях.

Установка

npm install react-otp-input
# или
yarn add react-otp-input

Использование

import React, { useState } from 'react';
import OTPInput from 'react-otp-input';

function App() {
  const [otp, setOtp] = useState('');

  return (
    <OTPInput
      value={otp}
      onChange={setOtp}
      numDigits={6}
      colors={{
        border: '#e0e0e0',
        borderHover: '#667eea',
        borderFocus: '#667eea',
        text: '#000',
        background: 'white',
        placeholder: '#999'
      }}
      styles={{
        width: '50px',
        height: '50px',
        fontSize: '1.5rem',
        borderRadius: '12px',
        gap: '12px'
      }}
    />
  );
}

Пропсы

| Проп | Тип | По умолчанию | Описание | |------|-----|--------------|-----------| | value | string | - | Текущее значение OTP | | onChange | (value: string) => void | - | Функция обратного вызова при изменении значения | | numDigits | number | - | Количество полей ввода | | renderSeparator | React.ReactNode | - | Компонент-разделитель между полями ввода | | renderInput | (props: React.InputHTMLAttributes) => React.ReactNode | - | Кастомный компонент для рендеринга полей ввода | | className | string | - | CSS класс для контейнера | | colors | object | - | Объект с цветами для стилизации | | styles | object | - | Объект со стилями для настройки размеров и отступов |

colors

| Свойство | Тип | По умолчанию | Описание | |----------|-----|--------------|-----------| | border | string | '#e0e0e0' | Цвет границы поля ввода | | borderHover | string | '#667eea' | Цвет границы при наведении | | borderFocus | string | '#667eea' | Цвет границы при фокусе | | text | string | 'inherit' | Цвет текста | | background | string | 'white' | Цвет фона | | placeholder | string | '#999' | Цвет плейсхолдера |

styles

| Свойство | Тип | По умолчанию | Описание | |----------|-----|--------------|-----------| | width | string | '50px' | Ширина поля ввода | | height | string | '50px' | Высота поля ввода | | fontSize | string | '1.5rem' | Размер шрифта | | borderRadius | string | '12px' | Скругление углов | | gap | string | '12px' | Отступ между полями ввода |

Особенности

• 🎨 Полностью настраиваемый внешний вид
• ⌨️ Автоматический переход к следующему полю
• ⌫ Поддержка backspace для возврата к предыдущему полю
• 📱 Адаптивный дизайн
• 🎯 Типизация TypeScript
• 💅 Стилизация через styled-components

Лицензия

MIT