react-native-markdown-engine
v0.0.1
Published
Custom React Native Markdown Engine for rendering Bold, Italic, BoldItalic, Hashtags, URLs, Emails.
Downloads
12
Maintainers
Readme
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
<[email protected]>
- [ ] 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.