React-native component which renders markdown into a webview!
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

README.md

react-native-showdown Dependency Status

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 react-native-showdown

Use as React component

Really simple markdown example with ES6/JSX:

import Markdown from 'react-native-showdown';

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/jerolimov/react-native-showdown.git
cd react-native-showdown/examples
npm install

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

Credits

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).