Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-native-markdown-editor with all npm packages installed. Try it out:

var reactNativeMarkdownEditor = require("react-native-markdown-editor")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-native-markdown-editor v1.0.1

A markdown editor for react native

react-native-markdown-editor

npm version Build Status

This is a library for rendering a markdown editor for the markdown with helper buttons to easily write markdown. With live preview markdown as well (thanks to https://github.com/Benjamin-Dobell/react-native-markdown-view)

Index

Getting Started

Install the node module:

`yarn add react-native-markdown-editor`

or with npm:

`npm install --save react-native-markdown-editor`

Then see Usage for futher details

Screenshots

Screenshot:

Features

  • Multiline textinput for writing markdown
  • Live preview of the markdown written (can be hidden)
  • Helper buttons to write the syntax for the markdown (like github)

Markdown where editor helps (in order for the default format)

Bold Text

Italic Text

Underline text

Strikethrough

Inline code

  • Item 1
  • Item 2

Url Links:

GitHub

function codeExample(arg) {
}

This is an < h1 > tag

Usage

Import the editor through

import { MarkdownEditor } from 'react-native-markdown-editor';

And use like this this in the jsx

<MarkdownEditor />

And pass a function onMarkdownChange which will be callback when markdown is changed

 <MarkdownEditor onMarkdownChange={this.onTextChange} />

It can be used with a toolbar and have a submit menu option there!

Customizing

Your own custom formats

You can give a custom list of buttons you want to give the default is Formats by speicifying

   <MarkdownEditor Formats={YOUR_CUSTOM_Formats} />

Customize the helper button

You can customize the helper button using the markdownButton prop. The buttons are rendered using a FlatList and the data passed is the Formats

markdownButton can be method like

const defaultMarkdownButton = ({ item, getState, setState }) =>
  <Button
    title={item.key}
    onPress={() => item.onPress({ getState, setState, item })}
    color={FOREGROUND_COLOR}
    style={inlinePadding}
  />

Where item is an each object in the Formats list

You can also import the methods used in Formats by using

import { applyWrapFormatNewLines, applyWrapFormat, applyWebLinkFormat, applyListFormat } from 'react-native-markdown-editor';

Customize the renderButton styles

You can add a style key in the Formats.js and this will be used while rendering the button

{ key: 'B', wrapper: '**', onPress: applyWrapFormat, style: { fontWeight: 'bold' } },

Props

NameTypeDefaultDescription
FormatsArrayFormatsElements for the markdown buttons
markdownButtonfunctiondefaultMarkdownButtonA custom function to render the markdown buttons
onMarkdownChangefunctionCallback function, calls when markdown is typed
showPreviewbooleanfalseTo show the markdown preview by Default

Contributing

PR's/Issues/Bugs or suggestions are welcomed kindly post them in the https://github.com/kunall17/react-native-markdown-editor/issues section.

License

The MIT License.

See LICENSE

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free