react input pin code react input pin code REAC

react input pin code

Сторонние компоненты

v1.2.1

Скачать

React входной код ввода

Доступный и простой входной компонент, построенный со стилями компонентов для ReactJS.

Демо

Здесь, чтобы увидеть документацию и примеры.

Исходный код на https://github.com/luffy84217/react-input-pin-code.

Установка

Чтобы начать, установить и сохранить в зависимости от package.json .

npm install react-input-pin-code styled-components

или

yarn add react-input-pin-code styled-components

Обратите внимание, что стилизованные компоненты-это зависимость от сверстников.

Импорт

Вы можете использовать следующие два способа импорта модуля.

 import { PinInput } from 'react-input-pin-code' // ES Module
or
var PinInput = require ( 'react-input-pin-code' ) . PinInput // CommonJS Module

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

Основной пример

 import React from 'react' ;
import { PinInput } from 'react-input-pin-code' ;

export default ( ) => {
  const [ values , setValues ] = React . useState ( [ '' , '' , '' ] ) ;

  return (
    < PinInput
      values = { values }
      onChange = { ( value , index , values ) => setValues ( values ) }
    />
  ) ;
} ;

Заполняя один символ за раз для каждого ввода. Когда вводится символ, фокус передает следующий вход автоматически в последовательности до тех пор, пока все входы не будут заполнены. Вот объяснение поведения ниже:

Вы можете заполнить только один символ за вход.
Чтобы перезаписать значение ввода, вам не нужно выбрать текст на входе. Если вы вводите цифру во время сфокусированного ввода, вход будет обновлять.
Нажатие Backspace , когда он пуст при входе, будет перемещаться фокус на предыдущий вход (если есть) и очистить значение.

Входной длина штифта

PinInput ожидает массива строк для опоры values . Количество отображаемых полей входных полей равно длине массива.

Прохождение идентификатора, имя класса и имя

Вы можете передавать id или name или containerClassName или inputClassName prop.classname и имя, и имя будут переданы среди входных данных, что означает, что у каждого из них будет установлено свое имя для этого значения, это удобно для использования псевдо -элемента в файле global.css . Идентификатор добавит индекс к любой строке, которую вы предоставляете, и передаст соответствующий вход. Например, если вы передаете Foo в качестве идентификатора и полоса в качестве имени, и есть четыре входа, полученные идентификаторы-это Foo-0 , Foo-1 , Foo-2 и Foo-3 , а у каждого ввода есть панель имен.

Размер ввода

Вы можете управлять размером входов с помощью size . Это поступает в четыре размера.

Разнообразие	Размер	Размер шрифта
XS	1,5Rem (24px)	0,75Rem (12px)
СМ	2Rem (32px)	0,875Rem (14px)
доктор медицинских наук	2.5Rem (40px)	1Rem (16px)
LG	3Rem (48px)	1.125Rem (18px)

Разрешение буквенно -цифровых входных значений

По умолчанию PinInput передается номером в виде type , поэтому он принимает только числовые значения для отображения. Чтобы добавить поддержку буквенно -цифровых значений, передайте type PROP и установите его значение в текст или номер .

Проверить и формат

PinInput предоставляет validate Prop для указания нативного pattern атрибута, который является регулярным выражением, которое значение ввода должно соответствовать, чтобы значение для проверки ограничений проходило.

Format Prop Укажите чистую функцию для преобразования необработанного ввода. Например, чтобы установить значения в верхний регистр:

(char: string) => char.toUpperCase()

Действительно и недействительное состояние

Вы можете передать validate Prop для проверки входных значений, если значение ввода не соответствует тесту, она будет отображать границу ошибки мгновенно входить, в то время как он будет показывать только действительную границу после того, как все входы заполняются и проходят проверку.

Вы можете отключить это поведение, установив поддержку showState на False .

Добавление маски

Вы можете установить Prop mask в True , чтобы не было отображать входные значения. Это эквивалентно настройке ввода нативного type атрибута в пароль .

Отключить управление фокусом

По умолчанию PinInput автоматически перемещает фокус к следующему входу после заполнения поля. Он также переносит фокус на предыдущий вход, когда Backspace нажимается с фокусом на пустом входе.

Чтобы отключить это поведение, установите autoTab Prop в False

Автофокус

PinInput предлагает способ, чтобы он сосредоточился с самого начала. Просто установите autoFocus prop на True , чтобы сфокусировать первый вход на начальном монтаже компонента.

Как только все входы заполнены

PinInput предоставляет onComplete событий для доступа к значениям ввода, в отличие от onChange , onComplete Triggers только при заполнении всех входов.

Обратите внимание, что если вы предложите список разрешенных символов для validate PROP, onComplete будет запускать ONY, когда все входные значения передают проверку.

Изменение заполнителя

По умолчанию PinInput Placeholder - это (○), вы можете изменить это, если хотите.

Автозаполнение и копирование + вставка

Попробуйте копировать и вставить 1234 в любой из входов.

По умолчанию вы можете изменить только один вход за раз, но если одно из поля ввода получает более длинную строку, вставая в нее, PinInput пытается проверить строку и заполнить другие входы.

Stateful (неконтролируемый) ввод PIN -кода

Существует также неконтролируемая версия, StatefulPinInput , которая управляет своим собственным состоянием. Длина ввода по умолчанию для этого компонента составляет четыре, но вы можете изменить его, передавая число на length . ASLO вы можете передать initialValue в качестве начального значения для StatefulPinInput .

 import React from 'react' ;
import { StatefulPinInput } from 'react-input-pin-code' ;

export default ( ) => {
  return (
    < StatefulPinInput
      length = { 4 }
      initialValue = "1234"
    />
  ) ;
} ;

API

PinInput реквизит

Имя (*Требуется)	Тип	По умолчанию	Описание
Ария-депингби	нить		Устанавливает атрибут Aria-Describedby.
ария	нить	"Пожалуйста, введите PIN -код"	Устанавливает атрибут арию.
ария-маркированная	нить		Устанавливает атрибут ARIA-MABELLEDBY.
автозаполнение	нить	"выключенный"	Определяет, должен ли браузер предоставить ценные предложения.
Автофокус	логический	ЛОЖЬ	Если правда, вход будет сосредоточен на первом креплении.
Автотаб	логический	истинный	Если истинный фокус будет автоматически перемещаться к следующему/предыдущему входу после заполнения или удаления
Bordercolor	нить	RGB (204,204,204)	Позвольте вам настроить цвет границы, когда вход не сфокусирован.
errorbordercolor	нить	RGB (220,53,69)	Позвольте вам настроить цвет границы, когда вход недействителен.
FOCUSBORDERCOLOR	нить	RGB (13,110 253)	Позвольте вам настроить цвет границы, когда ввод сфокусирован.
ValiveBordercolor	нить	RGB (25 135,84)	Позвольте вам настроить цвет границы, когда вход действителен.
неполноценный	логический		Образует компонент в состоянии инвалида.
формат	(char: string) => строка		Чистая функция преобразования необработанного ввода.
идентификатор	нить		Значение атрибута ID, которое будет добавлено в входной элемент, и в виде метки для значения атрибута.
Входная мода	нить		Этот атрибут позволяет браузеру отображать подходящую виртуальную клавиатуру. ( Примечание `type` PROP будет автоматически определять соответствующий `inputMode` . Если вы передаете PROP `inputMode` , она будет переопределить встроенный `inputMode` .)
маска	логический	ЛОЖЬ	Не показывать код PIN -кода
имя	нить		Атрибут имени.
Онблур	(Событие: React.focusevent) => void		Вызвал триггеры Onblur Event.
Онхандж	(значение: String \| String [], Index: Number, значения: String []) => void		Вызывается, когда входное значение изменяется.
Oncomplete	(значения: string []) => void		Вызывается, когда все входы заполняются и подтверждены
Onfocus	(Событие: React.focusevent) => void		Называется триггеры события Onfocus.
OnKeyDown	(Событие: React.keyboardevent) => void		Вызвал триггеры события OnkeyDown.
заполнитель	нить	"О"	Отображается, когда PIN -код еще не введен.
необходимый	логический		Образует компонент в требуемом состоянии.
Showstate	логический	истинный	Определите, отображается ли действительная/недействительная граница или нет.
размер	"xs" \| "SM" \| "MD" \| "LG"	"MD"	Образует компонент в предоставленном размере.
контейнер	нить		Позволяет добавить пользовательский класс к элементу контейнера.
ContainersTyle	объект	{}	Позволяет настроить элемент контейнера.
inputclassname	нить		Позволяет вам добавить пользовательский класс к элементу ввода.
ввода -стиль	объект	{}	Позволяет настроить входной элемент.
тип	"номер" \| "текст"	"число"	Тип значений, которые должен разрешить вход
проверять	строка \| String [] \| Regexp		Регулярное выражение, которое значение ввода должно соответствовать, чтобы значение пропустить проверку ограничения.
ценности(*)	нить[]		Атрибут значения Pininput.

StatefulPinInput реквизит

Имя	Тип	По умолчанию	Описание
длина	число	4	Количество входных полей.
начальный зал	строка \| нить[]	""	Начальное значение входа PIN.