react-native-markdown-engine v0.0.1

React Native Markdown Engine

=================

A simple markdown engine that renders a <View> with child components using <Text> and custom components <FancyText> and <LinkText>.

For live example, view: github.com/iamjbecker/parmesan.

Features

• Bold _bold_ *bold*
• Italic __italic__ **italic**
• Bold-Italic ***bold-italic*** ___bold-italic___
• URLs [label](http://url.com) <http://url.com>
• Emails <me@example.com>
• Hashtags #hashtag

Example Usage

  import MarkdownEngine from './MarkdownEngine';

  let Markdown = new MarkdownEngine({
    parse: ['hashtag', 'url', 'email', 'bold', 'italic', 'bold-italic'],
    wrapOutput: Boolean, // Wrap output in a <View> (Defaults to false);
    styles: {
      plain: Object,
      bold: Object,
      italic: Object,
      hashtag: Object,
    },
    callbacks: {
      url: Function,
      email: Function,
      hashtag: Function,
    },
  });

  Markdown.parse('Make a *stellar* landing page #parmesan');
  > '<Text style={Markdown.styles.plain}>Make a </Text><FancyText type={"bold"} displayText={"stellar"}/><Text> landing page </Text><LinkText callback={Markdown.callbacks.hashtag} type={"hashtag"} displayText={"#parmesan"} />';

  Markdown.parse('*text*');
  > '<FancyText type={"bold"} displayText={"text"} />'

  Markdown.parse('This is _really_ important.');
  > '<Text style={Markdown.styles.plain}>This is </Text><FancyText type={"italic"} displayText={"really"} /><Text style={Markdown.styles.plain}> important.</Text>'

To Do

• Engine & Regular Expressions
• Styles passed via props
• Callback via props

Support

Hit me up on twitter @iamjbecker.