https://github.com/steelydylan/react-split-mde

https://github.com/steelydylan/react-split-mde

markdown markdown-editor react typescript

Last synced: 4 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/steelydylan/react-split-mde
• Owner: steelydylan
• License: mit
• Created: 2020-09-23T15:22:49.000Z (almost 5 years ago)
• Default Branch: develop
• Last Pushed: 2023-02-02T11:10:33.000Z (over 2 years ago)
• Last Synced: 2025-03-17T16:55:30.319Z (4 months ago)
• Topics: markdown, markdown-editor, react, typescript
• Language: TypeScript
• Homepage: https://react-split-mde.vercel.app
• Size: 538 KB
• Stars: 36
• Watchers: 2
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React Split MDE

![](https://github.com/steelydylan/react-split-mde/workflows/Node%20CI/badge.svg)

[![npm version](https://badge.fury.io/js/react-split-mde.svg)](https://badge.fury.io/js/react-split-mde)

[![npm download](http://img.shields.io/npm/dm/react-split-mde.svg)](https://www.npmjs.com/package/react-split-mde)

[![GitHub license](https://img.shields.io/badge/license-MIT-brightgreen.svg)](https://raw.githubusercontent.com/steelydylan/react-split-mde/master/LICENSE)

[![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Awesome%20Markdown%20Editor%20JavaScript%20%Editor&url=https://github.com/steelydylan/react-split-mde&via=zenn_dev&hashtags=zenn)

React Split MDE is a Markdown Editor which enables you to write contents smoothly even with a large amount of content.

| [](http://godban.github.io/browsers-support-badges/)Firefox | [](http://godban.github.io/browsers-support-badges/)Chrome | [](http://godban.github.io/browsers-support-badges/)Safari | [](http://godban.github.io/browsers-support-badges/)iOS Safari | 

| --------- | --------- | --------- | --------- | 

## ScreenShot

Not Yet

## Features

*   Fully customizable

*   Synced scroll position across the contents and the preview

*   No stress writing even with a large amount of content

## Install

You should also import zenn-markdown-html as peer dependencies

```sh

$ npm install react-split-mde zenn-markdown-html --save

```

## Usage

```js

import React, { useCallback, useState } from 'react';

import { render } from 'react-dom';

import { Editor, useProvider } from 'react-split-mde';

import { parser } from 'react-split-mde/lib/parser';

import 'react-split-mde/css/index.css';

const MDE = () => {

  const [markdown, setMarkdown] = useState('')

  const handleValueChange = useCallback((newValue: string) => {

    setMarkdown(newValue);

  }, []);

  return (

    

  )

}

render(, document.getElementById("app"));

```

## Try it on CodeSandbox

Not yet...

## Props

| Props            | Description                                             | Type                                        | Default |

|------------------|---------------------------------------------------------|---------------------------------------------|---------|

| commands         | key binds                                               | Record< string,  Command>;               |         |

| previewClassName | class name to be applied to preview area                |                                             | "znc"   |

| previewCallback  | morphdom callbacks to be applied to preview area        | Record<string, Function>                    | {}      |

| parser           | markdown parser function                                | ( text :  string )  =>   Promise <string> |         |

| value            | markdown                                                | string                                      | ""      |

| onChange         | callback when markdown changed                          | ( value :  string )  =>   void              |         |

| psudoMode        | highlight markdown area with highlight.js               | boolean                                     | false   |

| debounceTime     | debounced time to apply markdown result to preview area | number                                      | 3000    |

## Download

[Download ZIP](https://github.com/steelydylan/react-split-mde/archive/master.zip)

## Github

[https://github.com/steelydylan/react-split-mde](https://github.com/steelydylan/react-split-mde)

## Contributor

[@steelydylan](https://github.com/steelydylan)

## License

Code and documentation copyright 2020 by steelydylan, Inc. Code released under the [MIT License](https://github.com/steelydylan/react-split-mde/blob/master/LICENSE).