soywod / react-pin-field

📟 React component for entering PIN codes.
https://soywod.github.io/react-pin-field/
MIT License
413 stars 24 forks source link

Feature request: Set initial value #25

Closed Bloemendaal closed 3 years ago

Bloemendaal commented 3 years ago

Hi!

I was wondering if it is possible to set an initial value, e.g. when the code is already supplied in the query parameters.

Thanks :)

soywod commented 3 years ago

Theoretically you can do it thanks to the ref:

const ref = useRef<HTMLInputElement[]>([]);

function setValue(pin: string) {
  if (ref.current) {
    ref.current.forEarch((input, idx) => {
      input.value = pin[idx];
    });
  }
}

return <PinField ref={ref} />;

Let me know if it helps you.

Bloemendaal commented 3 years ago

Cool! That works great! Thanks! 😁👏