Skip to content

Latest commit

 

History

History
executable file
·
64 lines (49 loc) · 1.96 KB

README.md

File metadata and controls

executable file
·
64 lines (49 loc) · 1.96 KB

react-pin-form

version dependencies

  • Provided as hook.
  • Provides only the logic, excluding the UI (Users can customize the UI.).
  • Delegates the execution of result to the user.
Example.With.Custom.UI.mov

Example with framer-motion

Install

yarn add react-pin-form
pnpm intall react-pin-form
npm install react-pin-form

peer Dependencies

{
  "react": "^18",
  "react-dom": "^18"
}

API

name description type default required
length pin length number *
initialValue initial pin value. shorter than length prop. string
validate validate pin char RegExp, ((char: string) => boolean) /^.$/
autoFocus input autoFocus boolean false

How to Use

import { usePinForm } from 'react-pin-form';

export function Example() {
  const { value, focusedIndex, inputRef, inputProps, onBoxFocus } = usePinForm({ length: 6, autoFocus: true });

  return (
    <>
      <input ref={inputRef} {...inputProps} style={hiddenStyle} />
      {value.map((v, i) => (
        // you can customize box ui as you want!
        <div key={i} onClick={() => onBoxFocus(i)}>{v}</div>
      )}
    </>
  )
}

const hiddenStyle = {
  position: 'absolute';
  top: -9999;
  left: -9999;
};