@erusinchuk/react-otp-input

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