4

I'm using React-Admin and have a field in my database that contains linebreaks (\n). When I output this on a page like this:

<TextField source="extra_details" />

The linebreaks are ignored and everything runs together. How can I make the linebreaks show properly?

Thanks

matt
  • 723
  • 1
  • 12
  • 20

4 Answers4

3

You can create your custom TextField with pre-wrap style by default:

import { FC } from "react";
import { TextField as BaseTextField, TextFieldProps } from "react-admin";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  textContent: {
    whiteSpace: "pre-wrap"
  },
});

export const TextField: FC<TextFieldProps> = (props) => {
  const classes = useStyles();

  return <BaseTextField
    className={classes.textContent}
    {...props}
  />
}
TextField.defaultProps = {
  addLabel: true,
}

Then use it as you use the vendor TextField.

Please note the addLabel option: You need it to keep the label being shown with a custom component.

You can have more details and sample here: https://marmelab.com/react-admin/Fields.html#styling-fields

Soullivaneuh
  • 3,553
  • 3
  • 37
  • 71
1

Styles may help...

import {withStyles} from "@material-ui/core/styles";

const styles = {
  displayLinebreakAndTab: {whiteSpace: "pre-wrap" },
};

const SomeText = withStyles(styles)(({classes, ...props}) => (
  <TextField
    className={classes.displayLinebreakAndTab}
    {...props}
  />
));
Vladimir K
  • 11
  • 1
1

I found this thread very helpful. https://github.com/marmelab/react-admin/issues/2403

The TextField component passes all its props to the underlying Typography component. So you can do:

<TextField component="pre" />

John McCabe
  • 702
  • 1
  • 6
  • 16
  • 1
    Using component="pre" in a TextField within a list breaks the heading of the React-Admin list - the "Add Filter" and "Export" buttons no longer appear.Use useStyles and associate whitespace: Pre-wrap to the field per Soullivaneuh's recommendation. – LeslieM Apr 15 '21 at 12:42
0

What about <RichTextField />?

https://marmelab.com/react-admin/Fields.html#richtextfield

Or you could always create your own TextField component.

Shawn K
  • 779
  • 5
  • 13