Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

@faisal50x/markdown-view

1.0.1 • Public • Published

markdown-view 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 @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).

Install

npm i @faisal50x/markdown-view

DownloadsWeekly Downloads

2

Version

1.0.1

License

MIT

Unpacked Size

769 kB

Total Files

214

Last publish

Collaborators

  • avatar