Allow to type any char from keyboard, not just numbers using react-number-format

[Emidomenge]

Hello,

Simple question but maybe hard to answer. (I hope not ^^)

I would like to make an input where the user has to insert an IBAN number.

Problem is IBAN number doesn't contain only numbers, it has also letters which leads to the problem that I'm unable to use react-number-format. This is not cool because I would to use mask, formatting as well for this input.

Is there any workaround to acheive so ?
Or is there a solution to customize the lib and define which chars from keyboard are accepted ?

Thanks !

[s-yadav]

This is out of scope for the module for now. You might like to give a try to react-input-mask(https://www.npmjs.com/package/react-input-mask)

[Emidomenge]

@s-yadav Alright, thanks for the link. I'll give it a try.

[timneyens]

@s-yadav can this feature be reconsidered? I checked react-input-mask but that library seems to be abandoned. I am looking for an alternative for react-text-mask as this is also an abandoned repo. This library looks very good but we would need the IBAN number masking as well.

[alexturpin]

@s-yadav gentle push to reconsider, seeing as react-text-mask is no longer maintained and in fact causes errors with modern React versions sanniassin/react-input-mask#255

[litera]

@timneyens @alexturpin
To those that wanted to use this lib to enter IBAN values. I've done it this way just for a subset of IBAN countries that have the format 21 characters. If you'd like to support all IBAN countries, then I suggest you use iban.js library. Majority of countries use IBAN human formatting to display values in quartets, but not all. If you'd like to support various format, you'll have to adjust the format function (or at least the substring call).

interface IBANInputProps extends NumberFormatBaseProps {
    onChange: ChangeEventHandler<HTMLInputElement>;
}

const IBANInputDef: FunctionComponent<IBANInputProps> = ({ onChange, ...props }) => (
    <NumberFormatBase
        {...props}
        type="text"
        format={(value) =>
            value
                .replace(/\s+/g, '')
                .replace(/([a-z0-9]{4})/gi, '$1 ')
                .trim()
                .toLocaleUpperCase()
        }
        removeFormatting={(value) => value.replace(/\s+/gi, '')}
        isValidInputCharacter={(char) => /^[a-z0-9]$/i.test(char)}
        getCaretBoundary={(value) =>
            Array(value.length + 1)
                .fill(0)
                .map((v) => true)
        }
        onValueChange={(values, { event }) =>
            onChange(
                Object.assign({} as ChangeEvent<HTMLInputElement>, event, {
                    target: { name: props.name, value: values.value.toLocaleUpperCase() },
                })
            )
        }
        onKeyDown={(e) =>
            !/^(?:[a-z0-9]|Backspace|Delete|Home|End|ArrowLeft|ArrowRight|Shift|CapsLock|Control|NumLock|Tab|Paste|Redo|Undo)$/i.test(
                e.key
            ) && e.preventDefault()
        }
    />
);

const IBANInput = forwardRef<HTMLInputElement, IBANInputProps>((props, ref) => (
    <IBANInputDef {...props} getInputRef={ref} />
));

[s-yadav]

Hey @litera thanks for the suggested snippet. Would you like to contribute this under the customization section on the doc?
https://s-yadav.github.io/react-number-format/docs/customization

[litera]

@s-yadav Took me some time, but PR is awaiting a review and approval.

[AlanGreyjoy]

Can we get a review on the above PR and merged??

[s-yadav]

Looks like it was merged but missed publishing the doc. Done now.
https://s-yadav.github.io/react-number-format/docs/customization/#iban-account-input-field-with-pattern

[AlanGreyjoy]

Looks like it was merged but missed publishing the doc. Done now. https://s-yadav.github.io/react-number-format/docs/customization/#iban-account-input-field-with-pattern

Beautiful! Trying to get this work for MAC addresses.