Unduh react input pin code - react input pin code Source Code Unduh

react input pin code

Komponen pihak ketiga

v1.2.1

Unduh

Bereaksi kode pin input

Komponen input pin yang dapat diakses dan sederhana yang dibangun dengan komponen gaya untuk reactJs.

Demo

gambar

Di sini untuk melihat dokumentasi dan contoh.

Kode Sumber di https://github.com/luffy84217/reacct-put-pin-code.

Instalasi

Untuk memulai, instal dan simpan dalam dependensi package.json Anda, jalankan:

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

atau

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

Harap dicatat bahwa komponen gaya adalah ketergantungan sebaya.

Pengimporan

Anda dapat menggunakan dua cara berikut untuk mengimpor modul.

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

Penggunaan

Contoh Dasar

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

Mengisi satu karakter pada satu waktu untuk setiap input. Ketika karakter dimasukkan, fokus transfer ke input berikutnya secara otomatis dalam urutan sampai semua input diisi. Berikut adalah penjelasan perilaku di bawah ini:

Anda hanya dapat mengisi satu karakter per input.
Untuk menimpa nilai input, Anda tidak perlu memilih teks dalam input. Jika Anda mengetik digit saat input difokuskan, input akan diperbarui.
Menekan Backspace saat kosong di input akan memindahkan fokus ke input sebelumnya (jika ada) dan menghapus nilainya.

Panjang input pin

PinInput mengharapkan array string untuk prop values . Jumlah bidang input yang diberikan sama dengan panjang array.

Lewat id, classname dan namanya

Anda dapat meneruskan id atau name atau containerClassName atau inputClassName prop.className dan name akan dibagikan di antara input, yang berarti mereka masing -masing akan memiliki nama yang diatur ke nilai ini, nyaman untuk penggunaan elemen pseudo dalam file global.css . ID akan menambahkan indeks ke string apa pun yang Anda berikan dan lulus ke input yang sesuai. Misalnya, jika Anda meneruskan FOO sebagai id dan bar sebagai nama dan ada empat input, ID yang dihasilkan adalah FOO-0 , FOO-1 , FOO-2 , dan FOO-3 dan masing-masing input memiliki bilah nama.

Ukuran input

Anda dapat mengontrol ukuran input dengan size prop. Muncul dalam empat ukuran.

Variasi	Ukuran	Ukuran font
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)

Memungkinkan nilai input alfanumerik

Secara default, PinInput dilewatkan nomor sebagai type prop sehingga hanya menerima nilai numerik untuk muncul. Untuk menambahkan dukungan untuk nilai alfanumerik, lewati type prop dan atur nilainya ke teks atau angka .

Validasi & Format

PinInput menyediakan validate prop untuk menentukan pattern atribut asli, yang merupakan ekspresi reguler yang harus dicocokkan oleh nilai input agar nilai agar lulus validasi kendala.

Format Prop Menentukan fungsi murni untuk mengubah input mentah. Misalnya, untuk mengatur nilai ke huruf besar:

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

Status yang valid & tidak valid

Anda dapat melewati validate prop untuk memvalidasi nilai input, jika nilai input tidak cocok dengan tes, itu akan menunjukkan batas kesalahan secara instan masuk, sementara itu hanya akan menunjukkan perbatasan yang valid setelah semua input diisi dan lulus validasi.

Anda dapat menonaktifkan perilaku ini dengan mengatur prop showState ke false .

Menambahkan topeng

Anda dapat mengatur prop mask ke true untuk mencegah dari menunjukkan nilai input. Ini setara dengan mengatur input type atribut asli ke kata sandi .

Nonaktifkan manajemen fokus

Secara default, PinInput memindahkan fokus secara otomatis ke input berikutnya setelah bidang diisi. Ini juga mentransfer fokus ke input sebelumnya ketika Backspace ditekan dengan fokus pada input kosong.

Untuk menonaktifkan perilaku ini, atur prop autoTab ke false

Fokus otomatis

PinInput menawarkan cara membiarkannya fokus sejak awal. Cukup atur autoFocus prop ke true untuk memfokuskan input pertama pada pemasangan awal komponen.

Setelah semua input diisi

PinInput menyediakan event handler onComplete untuk mengakses nilai input, tidak seperti onChange , onComplete hanya memicu ketika semua input diisi.

Perhatikan jika Anda menawarkan daftar karakter yang diizinkan untuk validate prop, onComplete akan memicu ony ketika semua nilai input lulus validasi.

Mengubah placeholder

Secara default, placeholder PinInput adalah (○), Anda dapat mengubahnya jika Anda mau.

Autofill dan Salin + Tempel

Coba menyalin & menempel 1234 ke salah satu input.

Secara default, Anda hanya dapat mengubah satu input pada satu waktu, tetapi jika salah satu bidang input menerima string yang lebih panjang dengan menempelkannya, PinInput berupaya memvalidasi string dan mengisi input lainnya.

Input pin stateful (tidak terkendali)

Ada juga versi yang tidak terkendali, StatefulPinInput , yang mengelola keadaannya sendiri. Panjang input default untuk komponen ini adalah empat, tetapi Anda dapat mengubahnya dengan mengirimkan angka ke prop length . Aslo Anda dapat melewati initialValue sebagai nilai awal untuk StatefulPinInput .

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

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

API

Alat PinInput

Nama (*diperlukan)	Jenis	Bawaan	Keterangan
ARIA-DESSRIPTYDY	rangkaian		Menetapkan atribut yang dideskripsikan aria.
aria-label	rangkaian	"Harap masukkan kode pin"	Mengatur atribut aria-label.
aria-labeledby	rangkaian		Mengatur atribut aria-labeledby.
Autocomplete	rangkaian	"mati"	Menentukan apakah browser harus memberikan saran nilai.
fokus otomatis	Boolean	PALSU	Jika benar input akan difokuskan pada gunung pertama.
Autotab	Boolean	BENAR	Jika fokus sejati akan bergerak secara otomatis ke input berikutnya/sebelumnya setelah diisi atau dihapus
BorderColor	rangkaian	RGB (204.204.204)	Biarkan Anda menyesuaikan warna perbatasan saat input tidak fokus.
errorbordercolor	rangkaian	RGB (220,53,69)	Biarkan Anda menyesuaikan warna perbatasan saat input tidak valid.
Focusbordercolor	rangkaian	RGB (13.110.253)	Biarkan Anda menyesuaikan warna perbatasan saat input difokuskan.
Validbordercolor	rangkaian	RGB (25.135,84)	Biarkan Anda menyesuaikan warna perbatasan saat input valid.
dengan disabilitas	Boolean		Membuat komponen dalam keadaan cacat.
format	(char: string) => string		Fungsi murni untuk mengubah input mentah.
pengenal	rangkaian		Nilai atribut ID yang akan ditambahkan ke elemen input dan sebagai nilai label untuk nilai atribut.
InputMode	rangkaian		Atribut ini memungkinkan browser untuk menampilkan keyboard virtual yang sesuai. ( Catatan `type` Prop akan menentukan `inputMode` yang sesuai secara otomatis. Jika Anda lulus `inputMode` prop, itu akan mengganti `inputMode` bawaan.)
masker	Boolean	PALSU	Mencegah menunjukkan kode pin
nama	rangkaian		Atribut Nama.
Onblur	(peristiwa: react.focusevent) => void		Disebut pemicu acara Onblur.
Onchange	(Nilai: String \| String [], Indeks: Nomor, Nilai: String []) => void		Dipanggil saat nilai input diubah.
onComplete	(nilai: string []) => void		Dipanggil saat semua input diisi dan divalidasi
Onfocus	(peristiwa: react.focusevent) => void		Disebut pemicu acara OnFocus.
Onkeydown	(acara: react.keyboardevent) => void		Disebut pemicu acara OnKeydown.
placeholder	rangkaian	"Hai"	Ditampilkan saat kode pin belum dimasukkan.
diperlukan	Boolean		Membuat komponen dalam keadaan yang diperlukan.
ShowState	Boolean	BENAR	Tentukan apakah perbatasan yang valid/tidak valid muncul atau tidak.
ukuran	"XS" \| "SM" \| "md" \| "LG"	"MD"	Membuat komponen dalam ukuran yang disediakan.
ContainerClassName	rangkaian		Memungkinkan Anda menambahkan kelas khusus ke elemen kontainer.
containerstyle	obyek	{}	Memungkinkan Anda menyesuaikan elemen kontainer.
InputClassName	rangkaian		Memungkinkan Anda menambahkan kelas khusus ke elemen input.
InputStyle	obyek	{}	Memungkinkan Anda menyesuaikan elemen input.
jenis	"Nomor" \| "teks"	"nomor"	Jenis nilai yang harus diizinkan oleh input
mengesahkan	String \| string [] \| Regexp		Ekspresi reguler yang harus dicocokkan oleh nilai input agar nilai lulus validasi kendala.
nilai (*)	rangkaian[]		Atribut Nilai Pininput.