Working on a new design system component for various kinds of list items, settings rows, etc throughout our app
It looks simple but it's turning out to be extremely difficult. I'm not sure it's even possible
I've gotten very close except for centering "value"
codepen.io/editor/Jamie...
![function Example() {
let [cardNumber, setCardNumber] = useState()
let { inputProps, ...otherStuff } = useInputMask({
mask: "0000 0000 0000 0000",
value: cardNumber,
onValueChange: setCardNumber,
})
// <MyInput> needs to accept all of these props:
//
// inputProps = {
// value,
// onInput, onPaste, onFocus, onBlur,
// onKeyDown, onKeyPress, onKeyUp,
// }
return <MyInput {...inputProps}/>
}](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:mlm5fumlu4k7emxlveklmp4z/bafkreifvrvm2ajojsa27syjr55k2mfya2t7yk76ipihy7tppgdtviuxcda)
![function Example() {
let [cardNumber, setCardNumber] = useState()
let ref = useRef()
let { ...otherStuff } = useInputMask(ref, {
mask: "0000 0000 0000 0000",
value: cardNumber,
onValueChange: setCardNumber,
})
// <MyInput> only needs to accept a ref
return <MyInput ref={ref} />
}](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:mlm5fumlu4k7emxlveklmp4z/bafkreidx7wgpz65usbhdunf5fch7kvf2q64shw5uckuwn2tawmbycqqqfa)