Material-uiでカウンター付きTextField

material-uiでカウンターがサポートされてない

マテリアルデザインのスペックでは、テキストフィールドにカウンターもありますが、material-uiにはカウンターのAPIが実装されていません。

ということで何回かカスタムコンポーネントを書くことになったので、メモとして残します。

TextFieldをラップする

maxLengthプロップを持たせたカスタムコンポーネントを作成します。

type AdditionalTextFieldProps = {
  maxLength?: number;
};

type CustomTextFieldProps = TextFieldProps & AdditionalTextFieldProps;

const CustomTextField: React.FC<CustomTextFieldProps> = ({
  maxLength,
  inputProps,
  helperText,
  ...rest
}) => {
  const inputRef = useRef<HTMLInputElement>(null);
  const currentValueLength = inputRef.current?.value?.length;
  const isCounterAvailable =
    maxLength && typeof currentValueLength === 'number';

  return (
    <TextField
      inputRef={inputRef}
      inputProps={{...inputProps, maxLength}}
      helperText={
        (helperText || isCounterAvailable) && (
          <Box component="span" display="flex" justifyContent="space-between">
            <Typography variant="caption" color="textSecondary">
              {helperText || ''}
            </Typography>
            {isCounterAvailable && (
              <Typography variant="caption" color="textSecondary">
                {currentValueLength}/{maxLength}
              </Typography>
            )}
          </Box>
        )
      }
      {...rest}
    />
  );
};

その他

FormHelperTextPropsのcomponentがタイプ定義されてないみたいです。