I'm having trouble with newlines and using react-markdown in conjunction with react-pdf.

[pd2xts]

I am using react-markdown to convert markdown into JSX accepted by react-pdf using the components prop.

This works beautifully, except that it react-pdf complaining about the newlines that appear to remain in the JSX but unwrapped by any component. In React PDF, all text including newlines must be wrapped in a component otherwise it is unhappy.

I get lots of errors like this:

Invalid '
' string child outside <Text> component`

I can't wrap the whole output in a Text component as although it resolves this issue it then is not formatted correctly.

[ChristianMurphy]

Duplicate of https://github.com/orgs/remarkjs/discussions/1183
react-markdown renders for HTML, react-native and react-pdf do not follow HTML, if your renderer does not follow HTML rules, you may need to adjust the structure of the document using the AST to add the custom elements needed.

[wb-ts]

To resolve the issue of newlines causing errors in react-pdf, you can wrap the text content of each paragraph within <Text> components individually. This will ensure that all text, including the newlines, is properly wrapped.

Here's an example of how you can modify your code:

import React from 'react';
import ReactMarkdown from 'react-markdown';
import { Text } from 'react-pdf';

const MarkdownToPdf = ({ markdownContent }) => {
  const renderers = {
    paragraph: ({ children }) => <Text>{children}</Text>,
    // Add more custom renderers for other Markdown elements if needed
  };

  return (
    <>
      <ReactMarkdown components={renderers} children={markdownContent} />
    </>
  );
};

export default MarkdownToPdf;

In this example, we define a custom renderer for the paragraph element. The paragraph renderer wraps the children (text content) within a <Text> component, ensuring that each paragraph is properly formatted.

You can add more custom renderers for other Markdown elements as needed, following the same pattern.

Note: Make sure you have the correct import for the Text component from react-pdf.

I hope this resolves the issue! Let me know if you need further assistance.

[vasco3]

I am using react-markdown to convert markdown into JSX accepted by react-pdf using the components prop.

This works beautifully, except that it react-pdf complaining about the newlines that appear to remain in the JSX but unwrapped by any component. In React PDF, all text including newlines must be wrapped in a component otherwise it is unhappy.

I get lots of errors like this:

Invalid '
' string child outside <Text> component`

I can't wrap the whole output in a Text component as although it resolves this issue it then is not formatted correctly.

I'm having the same issue. I got components renderers to work with paragraph like @wb-ts said.

const renderers = {
    p: ({ children }) => <Text>{children}</Text>,
    // Add more custom renderers for other Markdown elements if needed
  };

But in the warnings I get the error like @pd2xts

Invalid '
' string child outside <Text> component`

The markdown looks like this:

654 - V. BLANCO

**Ancho:** 1,000 mm -	**Alto:** 1,200mm

Ventana

Programar: está pendiente manilla

Elaborado con sistema **EUROFUTUR 70**

So there are many \n characters and I wonder if there is a catch all key for the components custom renderer object.

Something like this

const renderers = {
    p: ({ children }) => <Text>{children}</Text>,
    "*": ({ children }) => <Text>{children}</Text>,
  };

[ChristianMurphy]

Duplicate of https://github.com/orgs/remarkjs/discussions/1183
react-markdown renders for HTML, react-native and react-pdf do not follow HTML, if your renderer does not follow HTML rules, you may need to adjust the structure of the document using the AST to add the custom elements needed.