Cleave.js: How to use with material-ui TextField and React-Final-Form?

[popuguytheparrot]

I want use material-ui TextField like skin for Cleave and RFF for form. Can you help me?

import React from "react";
import Cleave from "cleave.js/react";
import TextField from "material-ui/TextField";

export default ({
  input: { name, onChange, value, ...restInput },
  meta,
  ...rest
}) => (
  <TextField
    {...rest}
    name={name}
    helperText={meta.touched ? meta.error : undefined}
    error={meta.error && meta.touched}
    inputProps={restInput}
  >
    <Cleave name={name} onChange={onChange} value={value}/>
  </TextField>
);

[bogdansoare]

Also curious about an example of integrating cleave with react-final-form

[ofarukcaki]

I'm interested too

[popuguytheparrot]

@bogdansoare @ofarukcaki

import React from "react";
import Cleave from "cleave.js/react";
import { TextField } from "@material-ui/core";

function MaskedTextField(props) {
  const { options, inputRef, ...other } = props;
  return <Cleave {...other} ref={inputRef} options={options} />;
}

export default ({
  input: { name, onChange, value, ...restInput },
  meta,
  options,
  ...rest
}) => 
    <TextField
      {...rest}
      name={name}
      onChange={onChange}
      value={value}
      error={meta.error && meta.touched}
      helperText={meta && meta.touched ? meta.error : undefined}
      inputProps={{ ...restInput, options, value }}
      InputProps={{
        inputComponent: MaskedTextField
      }}
    />
  );
};

Need create adapter with cleave.js.
CleaveTextField it is adapter like in example in RFF.

[nosir]

Thanks @Popugune I also added this to the document

[wellyal]

Is there a way to keep the Material-UI design. I mean I did exactly like in your example but the input rendered wasn't anything like the material-UI input.

[madanodyblum]

asdasdasdasdasdad

[marcusflat]

I found this one https://codesandbox.io/s/z65pjx3m1x?from-embed that helped me with material-ui