guilhermerodz / input-otp

One time passcode Input. Accessible & unstyled.
https://input-otp.rodz.dev
MIT License
2.35k stars 47 forks source link

Missing a prop to pass a "name" to the underlying input. #21

Closed atej closed 5 months ago

atej commented 5 months ago

When using within an HTML <form> I need an id and name attribute for the underlying input.

Right now, I'm having to wrap the component and use an effect to accomplish this:

const {name, id} = props
const inputRef = useRef<HTMLInputElement>(null)

useEffect(() => {
  const el = inputRef.current
  if (!el) return
  if (id) el.id = id
  if (name) el.name = name
}, [])

return (
  <OTPInput
    ref={inputRef}
    // ...

It'll be nice to have id and name props that can be directly passed to OTPInput.

guilhermerodz commented 5 months ago

Hi! Could not reproduce the issue locally. Which version are you using?

Works in 0.3.31-beta

return (
  <OTPInput
    id="my-custom-input-id"
    name="my-custom-input-name"

https://github.com/guilhermerodz/input-otp/assets/10366880/4c38948c-279b-4b4b-aecc-be95c4ef2928

atej commented 5 months ago

Hey, yep it worked with the latest. Thank you. Great work!