Foysal50x / markdown-view

React-native component which renders markdown into a webview!

react-native-showdown

React-native component which renders markdown into a webview!

Features

• Renders Markdown into a react-native WebView component.
• Automatically opens links in the system browser.
• Customization with pure CSS.

Installation

npm install --save markdown-view

Use as React component

Really simple markdown example with ES6/JSX:

import Markdown from "markdown-view";

class Example extends Component {
	render() {
		var markdown = "# Welcome to React Native!\n\nMore content...";
		return <Markdown body={markdown} />;
	}
}

Available props / converter options

• title String, optional, plain text which will be used for the title, normally not shown, so you can skip this.
• body String, required, markdown body which will be shown as webview content.
• pureCSS String, optional, pure CSS which will be used to style the webview content.
• automaticallyAdjustContentInsets Bool, optional, see ScrollView#automaticallyAdjustContentInsets
• style mixed, optional (default { flex: 1 }), see View#style
• options Object, optional (default {simplifiedAutoLink: true, strikethrough: true, tables: true}), see Showdown#options

Run the example

git clone https://github.com/Faisal50x/markdown-view.git
cd markdown-view/example
npm install

Run the react-native project like any react-native project.

Credits

Fork From react-native-showdown

Project is based on the markdown parser Showdown.

Alternatives

• react-native-markdown which tries to render markdown as native components (instead of using a WebView).