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

スタイルのコンポーネントはピア依存関係です。

インポート

次の2つの方法を使用して、モジュールをインポートできます。

 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 ) }
    />
  ) ;
} ;

入力ごとに一度に1つの文字を入力します。文字が入力されると、すべての入力が記入されるまで、焦点は次の入力にシーケンスで自動的に転送されます。以下の動作の説明は次のとおりです。

入力ごとに1つの文字のみを入力できます。
入力の値を上書きするには、入力内のテキストを選択する必要はありません。入力が焦点を合わせている間に数字を入力すると、入力が更新されます。
入力で空のときにBackspaceを押すと、フォーカスが以前の入力（もしあれば）に移動し、値をクリアします。

ピン入力長

PinInputは、 values Prop。レンダリングされる入力フィールドの数は、配列の長さに等しくなります。

ID、クラス名、名前を渡す

idまたはnameまたはcontainerClassNameまたはinputClassName Prop.classNameとnameが入力間で共有される可能性があります。つまり、それぞれがこの値に設定されてglobal.cssことを意味します。 IDは、提供する任意の文字列にインデックスを追加し、対応する入力に渡します。たとえば、FOOをIDとバーとして名前として渡し、4つの入力がある場合、結果のIDはFOO-0 、 FOO-1 、 FOO-2 、およびFOO-3であり、各入力には名前バーがあります。

入力のサイズ

sizeプロップで入力のサイズを制御できます。 4つのサイズがあります。

バラエティ	サイズ	フォントサイズ
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 Propとして渡されるため、表示される数値のみを受け入れます。英数字値のサポートを追加するには、 typeプロップを渡し、その値をテキストまたは番号のいずれかに設定します。

検証＆フォーマット

PinInput 、Valueが制約検証を渡すために入力の値が一致する必要がある正規表現である、ネイティブ属性patternを指定するvalidate Propを提供します。

Formatプロップ生の入力を変換する純粋な関数を指定します。たとえば、値を大文字に設定するには：

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

有効および無効な状態

入力値を検証するためにvalidateを渡すことができます。入力の値がテストと一致しない場合、エラーボーダーが即座に入力されますが、すべての入力が記入されて検証に合格した後にのみ有効なボーダーが表示されます。

showState PropをFalseに設定することにより、この動作を無効にできます。

マスクの追加

入力値が表示されないように、 mask Propをtrueに設定できます。これは、入力ネイティブ属性typeパスワードに設定するのと同等です。

フォーカス管理を無効にします

デフォルトでは、 PinInputフィールドが満たされたら、自動的に次の入力に移動します。また、 Backspaceが空の入力に焦点を合わせて押された場合、以前の入力に焦点を転送します。

この動作を無効にするには、 autoTab PropをFalseに設定します

オートフォーカス

PinInput 、最初から集中する方法を提供します。 autoFocus PropをTrueに設定するだけで、コンポーネントの初期マウントに最初の入力を集中させます。

すべての入力が入力されたら

PinInput 、 onChangeとは異なり、すべての入力が入力された場合にのみトリガーをonCompleteのとは異なり、入力値にアクセスするためのonCompleteイベントハンドラーを提供します。

許可されている文字のリストを提供してProp validateする場合は、すべての入力値が検証に合格したときにOny onComplete Onyをトリガーします。

プレースホルダーの変更

デフォルトでは、 PinInput Placeholderは（○）です。必要に応じて変更できます。

オートフィルとコピー +ペースト

1234を入力のいずれかにコピーして貼り付けてみてください。

デフォルトでは、一度に1つの入力のみを変更できますが、入力フィールドの1つが貼り付けて長い文字列を受信した場合、 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 Props

名前（*必須）	タイプ	デフォルト	説明
Aria-DescribedBy	弦		Aria-DescribedBy属性を設定します。
アリアラベル	弦	「ピンコードを入力してください」	Aria-Label属性を設定します。
Aria-labelledby	弦		Aria-labelledby属性を設定します。
オートコンプリート	弦	"オフ"	ブラウザが価値の提案を提供するかどうかを判断します。
オートフォーカス	ブール	間違い	Trueの場合、入力は最初のマウントに焦点を合わせます。
autoTab	ブール	真実	真のフォーカスが自動的に自動的に移動し、入力が入力または削除されたら次の入力/前の入力に移動します
BorderColor	弦	RGB（204,204,204）	入力が集中していない場合は、ボーダーカラーをカスタマイズしましょう。
errorbordercolor	弦	RGB（220,53,69）	入力が無効な場合は、ボーダーの色をカスタマイズしましょう。
FocusborderColor	弦	RGB（13,110,253）	入力が焦点を合わせたら、ボーダーの色をカスタマイズしましょう。
validbordercolor	弦	RGB（25,135,84）	入力が有効な場合は、境界色の色をカスタマイズします。
無効	ブール		障害状態のコンポーネントをレンダリングします。
形式	（char：string）=> string		生の入力を変換するための純粋な関数。
id	弦		ID属性値は、入力要素に追加され、属性値のラベルとして追加されます。
inputMode	弦		この属性により、ブラウザが適切な仮想キーボードを表示できます。（ Note `type` Propは、適切な`inputMode`を自動的に決定します。PutputModeProp `inputMode`渡すと、内蔵の`inputMode`をオーバーライドします。）
マスク	ブール	間違い	PINコードの表示を防ぎます
名前	弦		名前属性。
onblur	（イベント：React.FocuseVent）=> void		Onblurイベントトリガーと呼ばれます。
onchange	（値：string \| string []、index：number、values：string []）=> void		入力値が変更されたときに呼び出されます。
oncomplete	（値：string []）=> void		すべての入力が記入され、検証されたときに呼び出されます
onfocus	（イベント：React.FocuseVent）=> void		オンフォーカスイベントトリガーと呼ばれます。
OnKeyDown	（イベント：React.KeyBoardEvent）=> void		OnKeyDownイベントトリガーと呼ばれます。
プレースホルダー	弦	「O」	ピンコードがまだ入力されていないときに表示されます。
必須	ブール		必要な状態でコンポーネントをレンダリングします。
showstate	ブール	真実	有効/無効な境界線が現れるかどうかを判断します。
サイズ	「xs」\| 「Sm」\| 「MD」\| 「LG」	「MD」	提供されたサイズのコンポーネントをレンダリングします。
CantaClassName	弦		コンテナ要素にカスタムクラスを追加してください。
ContainerSyle	物体	{}	コンテナ要素をカスタマイズできます。
inputClassName	弦		入力要素にカスタムクラスを追加します。
inputStyle	物体	{}	入力要素をカスタマイズできます。
タイプ	「番号」\| "文章"	"番号"	ピン入力が許可する値のタイプ
検証します	文字列\|文字列[] \| regexp		値が制約検証を渡すために、入力の値が一致しなければならない正規表現。
値（*）	弦[]		Pininput値属性。