@matheuswr89/react-native-markdown-editor

React Native Markdown Editor

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
• Screenshots
• Features
• Usage
• Customizing
  • Customize the styles
• Props for the Markdown Editor
• Contributing

Getting Started

Install the node module:

yarn add @matheuswr89/react-native-markdown-editor

or with npm:

npm install --save @matheuswr89/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

1. Item 1
2. Item 2

Url Links:

GitHub

Images:

function codeExample(arg) {
}

This is an < h1 > tag

Usage

Import the editor through

import { MarkdownEditor } from '@matheuswr89/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={onTextChange} />

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

To set a content in the editor, just pass the content in the props markdown like this:

 <MarkdownEditor onMarkdownChange={onTextChange} markdown={yourVariable} />

Customizing

Customize the styles

You can customize the styles of the following elements:

• Placeholder color | placeholderTextColor
• Text input | textInputStyles
• Helper buttons | buttonStyles
• Container of helper buttons | buttonContainerStyles
• Container of preview | markdownViewStyles

And you can do this by passing a props as below:

 <MarkdownEditor placeholderTextColor={yourVariableStylesHere} />

or:

 <MarkdownEditor placeholderTextColor={{yourStylesHere}} />

Props

Name	Type	Default	Description	Required
onMarkdownChange	function		Callback function, calls when markdown is typed	True
placeholder	string	"Type here"	Text of placeholder of the input	False
markdown	string	""	Content of editor	False
placeholderTextColor	string	"#000"	Color of the placeholder	False
buttonStyles	StyleSheet		Action button styles	False
buttonContainerStyles	StyleSheet		Action button container styles	False
textInputStyles	StyleSheet		Text input style	False
markdownViewStyles	StyleSheet		Markdown preview style (limited)	False

Contributing

PR's/Issues/Bugs or suggestions are welcomed. Please post them at https://github.com/matheuswr89/react-native-markdown-editor/issues.

License

The MIT License.

See LICENSE