Usage with react-text-mask

[DjolePetrovic]

Hi!

Thanks for this great library! I really like it a lot.

But I'm struggling to use it with react-text-mask and Typescript. Does anybody have a small example how to use it?

Thanks

[cliedeman]

Hi there, glad you like the library.

Adapted from here

import {render} from 'react-dom';
import MaskedInput from 'react-text-mask';
import NumberFormat from 'react-number-format';
import {createStyles, Theme, makeStyles} from '@material-ui/core/styles';
import {TextField} from 'formik-material-ui';
import {Formik, Field} from 'formik';

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    container: {
      display: 'flex',
      flexWrap: 'wrap',
    },
    formControl: {
      margin: theme.spacing(1),
    },
  })
);

interface TextMaskCustomProps {
  inputRef: (ref: HTMLInputElement | null) => void;
}

function TextMaskCustom(props: TextMaskCustomProps) {
  const {inputRef, ...other} = props;

  return (
    <MaskedInput
      {...other}
      ref={(ref: any) => {
        inputRef(ref ? ref.inputElement : null);
      }}
      mask={[
        '(',
        /[1-9]/,
        /\d/,
        /\d/,
        ')',
        ' ',
        /\d/,
        /\d/,
        /\d/,
        '-',
        /\d/,
        /\d/,
        /\d/,
        /\d/,
      ]}
      placeholderChar={'\u2000'}
      showMask
    />
  );
}

interface NumberFormatCustomProps {
  inputRef: (instance: NumberFormat | null) => void;
  onChange: (event: {target: {value: string}}) => void;
}

function NumberFormatCustom(props: NumberFormatCustomProps) {
  const {inputRef, onChange, ...other} = props;

  return (
    <NumberFormat
      {...other}
      getInputRef={inputRef}
      onValueChange={values => {
        onChange({
          target: {
            value: values.value,
          },
        });
      }}
      thousandSeparator
      prefix="$"
    />
  );
}

function FormattedInputs() {
  const classes = useStyles();

  return (
    <Formik
      initialValues={{
        numberFormat: '',
      }}
      onSubmit={() => {
        alert('submit');
      }}
      render={() => (
        <div className={classes.container}>
          <Field
            component={TextField}
            className={classes.formControl}
            name="textFormat"
            label="react-text-mask"
            InputProps={{
              inputComponent: TextMaskCustom as any,
            }}
          />
          <Field
            component={TextField}
            className={classes.formControl}
            name="numberFormat"
            label="react-number-format"
            InputProps={{
              inputComponent: NumberFormatCustom as any,
            }}
          />
        </div>
      )}
    />
  );
}

render(<FormattedInputs />, document.getElementById('root'));

[DjolePetrovic]

Works like a charm! Thanks @cliedeman!

[cliedeman]

Great!

[alexssandrog]

Hi, I'm tried this solution, but doesnt work. On every key pressed, the above warning is showed and the value disappear when exit the field.

Formik called handleChange, but you forgot to pass an id or name attribute to your input: undefined Formik cannot determine which value to update. For more info see https://github.com/jaredpalmer/formik#handlechange-e-reactchangeeventany--void

[cliedeman]

The name property needs to passed into the onChange so formik can identify the field to update

<NumberFormat
      {...props}
      getInputRef={inputRef}
      onValueChange={values => {
        onChange({
          target: {
            name: props.name,
            value: values.value,
          },
        });
      }}
      thousandSeparator
      prefix="$"
    />

[sflahave]

Just FYI - I had some trouble with the example @cliedeman posted from here It wouldn't work -the first character/keypress was getting through but nothing would show up. I eventually figured out that my problem was because I had set type="number" on my TextField . Once I removed that, it worked.

[mrcruz117]

@sflahave This fixed my issue! I guess it makes sense that the number format gets picky when you add the commas in there. Thanks for posting your solution 👍