HomeOur TeamContact

Markdown Editor

By Omkar Lubal
Published in Text
June 29, 2022
1 min read
Markdown Editor

Table Of Contents

01
Introduction
02
This is an < h1 > tag

Introduction

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)

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

License

The MIT License.


Tags

Text
Previous Article
Measure Text
Next Article
Markdown Display
Omkar Lubal

Omkar Lubal

Computer Science Aficionado

Related Posts

Measure Text
Measure Text
June 29, 2022
1 min

Quick Links

Advertise with usAbout UsContact Us

Social Media