All Projects → andangrd → React Native Markdown Package

andangrd / React Native Markdown Package

Licence: mit
React native markdown package is a Library for implementing markdown syntax in React Native

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to React Native Markdown Package

Diagon
Interactive ASCII art diagram generators. 🌟
Stars: ✭ 189 (+278%)
Mutual labels:  markdown, parser
Md4c
C Markdown parser. Fast. SAX-like interface. Compliant to CommonMark specification.
Stars: ✭ 322 (+544%)
Mutual labels:  markdown, parser
Parsedown
Better Markdown Parser in PHP
Stars: ✭ 13,959 (+27818%)
Mutual labels:  markdown, parser
Snarkdown
😼 A snarky 1kb Markdown parser written in JavaScript
Stars: ✭ 1,813 (+3526%)
Mutual labels:  markdown, parser
Ngx Markdown
Angular markdown component/directive/pipe/service to parse static, dynamic or remote content to HTML with syntax highlight
Stars: ✭ 687 (+1274%)
Mutual labels:  markdown, parser
Ink
A fast and flexible Markdown parser written in Swift.
Stars: ✭ 2,049 (+3998%)
Mutual labels:  markdown, parser
Craftinginterpreters
Repository for the book "Crafting Interpreters"
Stars: ✭ 4,298 (+8496%)
Mutual labels:  markdown, parser
Elm Markdown
Pure Elm markdown parsing and rendering
Stars: ✭ 96 (+92%)
Mutual labels:  markdown, parser
Sublime Markdown Extended
Top 100 Sublime Text plugin! Markdown syntax highlighter for Sublime Text, with extended support for GFM fenced code blocks, with language-specific syntax highlighting. YAML Front Matter. Works with ST2/ST3. Goes great with Assemble.
Stars: ✭ 645 (+1190%)
Mutual labels:  markdown, package
Remarkable
Markdown parser, done right. Commonmark support, extensions, syntax plugins, high speed - all in one. Gulp and metalsmith plugins available. Used by Facebook, Docusaurus and many others! Use https://github.com/breakdance/breakdance for HTML-to-markdown conversion. Use https://github.com/jonschlinkert/markdown-toc to generate a table of contents.
Stars: ✭ 5,252 (+10404%)
Mutual labels:  markdown, parser
Parsedown Extra Plugin
Configurable Markdown to HTML converter with Parsedown Extra Plugin.
Stars: ✭ 47 (-6%)
Mutual labels:  markdown, parser
Markdown Wasm
Markdown parser and HTML generator implemented in WebAssembly, based on md4c
Stars: ✭ 833 (+1566%)
Mutual labels:  markdown, parser
Md
A markdown parser and compiler. Built for speed.
Stars: ✭ 128 (+156%)
Mutual labels:  markdown, parser
Vue Styleguidist
Created from react styleguidist for Vue Components with a living style guide
Stars: ✭ 2,133 (+4166%)
Mutual labels:  markdown, parser
Commonmark Java
Java library for parsing and rendering CommonMark (Markdown)
Stars: ✭ 1,675 (+3250%)
Mutual labels:  markdown, parser
Termimad
A library to display rich (Markdown) snippets and texts in a rust terminal application
Stars: ✭ 293 (+486%)
Mutual labels:  markdown, parser
Marko
A markdown parser with high extensibility.
Stars: ✭ 77 (+54%)
Mutual labels:  markdown, parser
Linl
Linl Is Not Letter -- Markdown-based LaTeX Letter Template
Stars: ✭ 84 (+68%)
Mutual labels:  markdown, package
React Markdown Editor Lite
a light-weight Markdown editor based on React. 一款轻量的基于React的markdown编辑器
Stars: ✭ 553 (+1006%)
Mutual labels:  markdown, parser
Marked
A markdown parser and compiler. Built for speed.
Stars: ✭ 26,556 (+53012%)
Mutual labels:  markdown, parser

npm downloads npm_downloads

React Native Markdown Package

React Native Markdown Package is a library for implementing markdown syntax in React Native.

Getting started

To install this library, you can easily run this command from your project folder.

   npm i react-native-markdown-package --save

Check this simple app for implementation example Example app

How to use

What you need to do is import the react-native-markdown-package module and then use the <Markdown/> tag.

How to use?

Here we are, take a look at this simple implementation:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import {
  StyleSheet,
  ScrollView,
  View,
  Text,
  Linking
} from 'react-native';
import {
  Colors,
} from 'react-native/Libraries/NewAppScreen';
import Markdown from 'react-native-markdown-package';

const text = `
# This is Heading 1
## This is Heading 2
1. List1
2. List2
  This is a \`description\`  for List2 .\n
  * test
  * test
3. List3
4. List4.


You can also put some url as a link [like This](https://www.google.com) or write it as a plain text:
  https://www.google.com
  <[email protected]>

---

This text should be printed between horizontal rules

---

The following code is an example for codeblock:

    const a = function() {
      runSomeFunction()
    };

Below is some example to print blockquote

> Test block Quote
> Another  block Quote

this is _italic_ 
this is **strong**
Some *really* ~~basic~~ **Markdown**.


| # | Name   | Age 
|---|--------|-----|
| 1 | John   | 19  |
| 2 | Sally  | 18  |
| 3 | Stream | 20  |


this is an example for adding picture:

![Screen Shot 2019-10-05 at 3 19 33 AM](https://user-images.githubusercontent.com/26213148/66237659-d11f4280-e71f-11e9-91e3-7a3f08659d89.png)


`;

export default class App extends Component<{}> {
  render() {
    return (
      <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style={styles.scrollView}>
      <View style={styles.container}>
          <Text style={styles.welcome}>
            Welcome to React Native!
          </Text>
          <Markdown 
            styles={markdownStyle.collectiveMd} 
            onLink={(url) => Linking.openURL(url)}
          >
            { text } 
          </Markdown>
          <Markdown 
            styles={markdownStyle.singleLineMd}
          >
            this is a test single line md
          </Markdown>
      </View>
    </ScrollView>
    );
  }
}
const singleStyle = {
  text: {
    color: 'blue',
    textAlign: "right"
  },
  view: {
    alignSelf: 'stretch',
  }
};

const markdownStyle = {
  singleLineMd: {
    text: {
      color: 'blue',
      textAlign: "right"
    },
    view: {
      alignSelf: 'stretch',
    }
  },
  collectiveMd: {
    heading1: {
      color: 'red'
    },
    heading2: {
      color: 'green',
      textAlign: "right"
    },
    strong: {
      color: 'blue'
    },
    em: {
      color: 'cyan'
    },
    text: {
      color: 'black',
    },
    blockQuoteText: {
      color: 'grey'
    },
    blockQuoteSection: {
      flexDirection: 'row',
    },
    blockQuoteSectionBar: {
      width: 3,
      height: null,
      backgroundColor: '#DDDDDD',
      marginRight: 15,
    },
    codeBlock: {
      fontFamily: 'Courier',
      fontWeight: '500',
      backgroundColor: '#DDDDDD',
    },
    tableHeader: {
      backgroundColor: 'grey',
    },
  }
});

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    margin: 10,
    padding:20
  },
  scrollView: {
    backgroundColor: Colors.lighter,
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  }
});

Properties

styles

Default style properties will be applied to the markdown. You could replace it with your preference by adding styles property like the example above.

onLink

This prop will accept a function. This is a callback function for any link inside markdown syntax, so you could costumize the handler for onClick event from the link.

onLinkCallback should be a function that returns a promise.


const onLinkCallback = (url) => {
  console.log('test test test');

  const isErrorResult = false;

  return new Promise((resolve, reject) => {
    isErrorResult ? reject() : resolve();
  });
};

...

<Markdown
  styles={markdownStyle.collectiveMd}
  onLink={onLinkCallback}>
  {text}
</Markdown>

...


NOTE : Email link (mailto) could be tested on real device only, it won't be able to test on Simulator as discuss in this StackOverflow

Thanks To

I'm very thankful to the contributors who help me to make this libary better:

img img img img

This project was actually forked from lwansbrough , with some enhancements below :

  1. Styling method.

    Now you can easily add styling on each syntax, e.g. add different color either in strong, header, or another md syntax. All default styles in this package is also already moved to new file styles.js.

  2. Refactoring some codes to adopt ES6 style.

    Refactor index.js using ES6. :)

  3. Support Sublist.

    In the previous library, you couldn't add sublist. It was not supported. But now, this feature already added here. Please follow the instruction above...

  4. Latest release:

    • add Proptypes Support, (1.0.1)

    • Fix deprecated View.proptypes and update Readme (1.0.3)

    • Upgrade dependency, lodash, avoid vulnerabilities (1.1.0)

    • Fix performance issue, import only necessarry function from lodash (1.1.1)

    • Finalize Blockquote feature (1.2.0)

    • Update Docs (1.2.1)

    • Allow user to include plain text from variable using back tick (1.3.3)

    • New feature, codeblock (1.4.0)

    • New feature, on link handler (1.4.3)

    • Bug fix, Strike through issue (1.4.4)

    • Default Style for outer View, remove deprecated ComponentWillMount (1.5.0)

    • Allow user to replace default rules, update default font family for codeBlock on android (v1.6.0)

    • Update to use latest simple-markdown (v1.7.0)

    • Update to use latest simple-markdown (v1.8.0)

Happy Coding... ;)

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].