react input pin code 다운로드 - react input pin code 소스 코드 다운로드

react input pin code

타사 구성 요소

v1.2.1

다운로드

입력 핀 코드를 반응합니다

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, 클래스 이름 및 이름

id 또는 name 또는 containerClassName 또는 inputClassName Prop.ClassName을 전달할 수 있으며 입력 사이에서 이름이 공유됩니다. 즉, 각각 이름 이이 값으로 설정되어 있으므로 global.css 파일에서 Pseudo 요소를 사용하기에 편안합니다. ID는 귀하가 제공하는 모든 문자열에 인덱스를 추가하고 해당 입력으로 전달합니다. 예를 들어, FOO를 ID 및 막대로 전달하고 4 개의 입력이있는 경우 결과 ID는 FOO-0 , FOO-1 , FOO-2 및 FOO-3 이며 각 입력에는 이름 막대가 있습니다.

입력 크기

size 소품으로 입력의 크기를 제어 할 수 있습니다. 네 가지 크기로 제공됩니다.

다양성	크기	글꼴 크기
xs	1.5rem (24px)	0.75REM (12px)
SM	2REM (32px)	0.875rem (14px)
MD	2.5rem (40px)	1rem (16px)
LG	3REM (48px)	1.125rem (18px)

영숫자 입력 값을 허용합니다

기본적으로 PinInput type 소품 으로 전달되므로 숫자 값 만 표시 할 수 있습니다. 영숫자 값에 대한 지원을 추가하려면 type 소품을 전달하고 값을 텍스트 또는 숫자 로 설정하십시오.

검증 및 형식

PinInput 값이 제한 조건 검증을 통과하기 위해 입력의 값이 일치 해야하는 정규 표현식 인 기본 속성 pattern 지정하기 위해 validate 소품을 제공합니다.

Format 소품 원시 입력을 변환하기 위해 순수한 함수를 지정합니다. 예를 들어, 값을 대문자로 설정합니다.

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

유효하고 유효하지 않은 상태

입력 값을 검증하기 위해 validate 검사 소품을 전달할 수 있습니다. 입력 값이 테스트와 일치하지 않으면 오류 경계가 즉시 입력되며 모든 입력이 채워지고 유효성 검사를받은 후에 만 유효한 테두리를 표시합니다.

showState Prop을 False 로 설정 하여이 동작을 비활성화 할 수 있습니다.

마스크 추가

입력 값이 표시되지 않도록 mask 소품을 true 로 설정할 수 있습니다. 입력 기본 속성 type 암호 로 설정하는 것과 같습니다.

초점 관리를 비활성화합니다

기본적으로 PinInput 필드가 채워지면 다음 입력으로 초점을 자동으로 이동합니다. 또한 Backspace 빈 입력에 중점을두고 눌렀을 때 초점을 이전 입력으로 전송합니다.

이 동작을 비활성화하려면 autoTab Prop을 False 로 설정하십시오

자동 초점

PinInput 처음부터 초점을 맞출 수있는 방법을 제공합니다. 구성 요소의 초기 장착시 첫 번째 입력에 초점을 맞추기 위해 autoFocus 소품을 true 로 설정하기 만하면됩니다.

모든 입력이 채워지면

PinInput onChange 와 달리 모든 입력이 채워질 때만 onComplete 만 입력 값에 액세스 할 수있는 onComplete 이벤트 핸들러를 제공합니다.

통지 소품을 validate 위해 허용 된 문자 목록을 제공하는 경우 모든 입력 값이 유효성 검사를 전달할 때 onComplete 가 Ony를 트리거합니다.

자리 표시 자 변경

기본적으로 PinInput 자리 표시자는 (○) 원하는 경우 변경할 수 있습니다.

자동 수소 및 복사 + 붙여 넣기

1234를 입력에 복사하고 붙여 넣으십시오.

기본적으로 한 번에 하나의 입력 만 변경할 수 있지만 입력 필드 중 하나가 페이스트를 붙여서 더 긴 문자열을 수신하면 PinInput 문자열을 검증하고 다른 입력을 채우려 고 시도합니다.

상태 (제어되지 않은) 핀 입력

통제되지 않은 버전 인 StatefulPinInput 도 자체 상태를 관리합니다. 이 구성 요소의 기본 입력 길이는 4이지만 숫자를 length 소품으로 전달하여 변경할 수 있습니다. ASLO StatefulPinInput 의 초기 값으로 initialValue 전달할 수 있습니다.

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

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

API

PinInput 소품

이름 (*필수)	유형	기본	설명
아리아가 설명했다	끈		ARIA가 설명한 속성을 설정합니다.
아리아-라벨	끈	"PIN 코드를 입력하십시오"	Aria-Label 속성을 설정합니다.
Aria-Labelledby	끈		Aria-Labelledby 속성을 설정합니다.
자동 완성	끈	"끄다"	브라우저가 가치 제안을 제공 해야하는지 결정합니다.
자동 초점	부울	거짓	사실이라면 입력이 첫 번째 마운트에 중점을 둡니다.
자동 탭	부울	진실	진정한 초점이 채워 지거나 삭제 된 다음/이전 입력으로 자동 이동하는 경우
Bordercolor	끈	RGB (204,204,204)	입력에 초점을 맞추지 않을 때 테두리 색상을 사용자 정의 할 수 있습니다.
ERRORBORDERCOLOR	끈	RGB (220,53,69)	입력이 유효하지 않을 때 테두리 색상을 사용자 정의 할 수 있습니다.
FocusborderColor	끈	RGB (13,110,253)	입력이 집중 될 때 테두리 색상을 사용자 정의 할 수 있습니다.
ValidborderColor	끈	RGB (25,135,84)	입력이 유효 할 때 테두리 색상을 사용자 정의 할 수 있습니다.
장애가 있는	부울		장애인 상태에서 구성 요소를 렌더링합니다.
체재	(char : string) => 문자열		원시 입력을 변환하는 순수한 기능.
ID	끈		입력 요소에 추가 할 ID 속성 값과 속성 값에 대한 레이블로 값을 추가합니다.
입력 모드	끈		이 속성을 사용하면 브라우저가 적절한 가상 키보드를 표시 할 수 있습니다. ( 참고 `type` Prop은 적절한 `inputMode` 자동으로 결정합니다. `inputMode` 소품을 통과하면 내장 `inputMode` 무시합니다.)
마스크	부울	거짓	핀 코드를 표시하는 것을 방지합니다
이름	끈		이름 속성.
onblur	(이벤트 : react.focusevent) => void		Onblur 이벤트 트리거라고합니다.
onchange	(값 : String \| String [], index : 숫자, 값 : String []) => void		입력 값이 변경 될 때 호출됩니다.
oncomplete	(값 : String []) => void		모든 입력이 채워지고 검증 될 때 호출됩니다
Onfocus	(이벤트 : react.focusevent) => void		Onfocus 이벤트 트리거라고합니다.
onkeydown	(이벤트 : react.keyboardevent) => void		OnkeyDown 이벤트 트리거라고합니다.
자리 표시 자	끈	"영형"	PIN 코드가 아직 입력되지 않은 경우 표시됩니다.
필수의	부울		필요한 상태로 구성 요소를 렌더링합니다.
Showstate	부울	진실	유효한/유효하지 않은 테두리가 나타나는지 여부를 결정하십시오.
크기	"XS"\| "SM"\| "MD"\| "LG"	"MD"	제공된 크기로 구성 요소를 렌더링합니다.
ContainerClassName	끈		사용자 정의 클래스를 컨테이너 요소에 추가 할 수 있습니다.
컨테이너 타일	물체	{}	컨테이너 요소를 사용자 정의 할 수 있습니다.
inputClassName	끈		사용자 정의 클래스를 입력 요소에 추가 할 수 있습니다.
입력 스타일	물체	{}	입력 요소를 사용자 정의 할 수 있습니다.
유형	"번호"\| "텍스트"	"숫자"	핀 입력이 허용 해야하는 값의 유형
검증	문자열 \| 문자열 [] \| Regexp		값이 제한 조건 검증을 통과하기 위해 입력 값이 일치 해야하는 정규 표현식.
값 (*)	끈[]		Pininput 값 속성.