react-native-markdown-engine

0.0.1 • Public • Published

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.

Package Sidebar

Install

npm i react-native-markdown-engine

Weekly Downloads

5

Version

0.0.1

License

MIT

Last publish

Collaborators

  • iamjbecker