markdown-view
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 @faisal50x/markdown-view
Use as React component
Really simple markdown example with ES6/JSX:
import Markdown from "@faisal50x/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).