@s77rt/react-native-markdown is a components library that provides drop-in replacements for React Native components with a built-in Markdown formatter.

Installation

npm install @s77rt/react-native-markdown

Components

<MarkdownTextInput />

<MarkdownTextInput /> is a drop-in replacement for <TextInput /> with a built-in Markdown formatter that takes an additional prop markdownStyles allowing you to customize the format of each Markdown fragment. Please refer to Markdown Styles for the list of supported styles.

Usage

const markdownStyles = useMemo<MarkdownStyles>(
	() => ({
		h1: {
			fontSize: 24,
			fontWeight: "bold",
		},
		h2: {
			fontSize: 20,
			fontWeight: "bold",
		},
		blockquote: {
			stripeColor: "lightgray",
			stripeWidth: 4,
			gapWidth: 4,
		},
		bold: {
			fontWeight: "bold",
		},
		italic: {
			fontStyle: "italic",
		},
		link: {
			color: "blue",
		},
		/* ... */
	}),
	[]
);

// Render
<MarkdownTextInput markdownStyles={markdownStyles} multiline />

Markdown Styles

| | | | :--------------------: | :-----------------------------------------------------------------------------------------------------------------------: | | Heading (h1 -> h6) | backgroundColor, color, fontFamily, fontSize, fontStyle, fontWeight, | | blockquote | backgroundColor, color, fontFamily, fontSize, fontStyle, fontWeight, gapWidth, stripeWidth, stripeColor | | codeblock | backgroundColor, color, fontFamily, fontSize, fontStyle, fontWeight | | horizontalRule | backgroundColor, color, fontFamily, fontSize, fontStyle, fontWeight | | bold | backgroundColor, color, fontFamily, fontSize, fontStyle, fontWeight | | italic | backgroundColor, color, fontFamily, fontSize, fontStyle, fontWeight | | link | backgroundColor, color, fontFamily, fontSize, fontStyle, fontWeight | | image | backgroundColor, color, fontFamily, fontSize, fontStyle, fontWeight | | code | backgroundColor, color, fontFamily, fontSize, fontStyle, fontWeight | | strikethrough | backgroundColor, color, fontFamily, fontSize, fontStyle, fontWeight | | underline | backgroundColor, color, fontFamily, fontSize, fontStyle, fontWeight |

Something is missing? Submit an issue

Markdown Parsers

• Uses MD4C (forked)

Markdown Flavors

CommonMark is used with extended support for:

• Auto links
• Strikethrough

License

MIT