react-markdown-editor

A convenient React.js _markdown editor_ component,Type Markdown on the left and you can preview in real-time on the right panel.

Demo

Install

npm install --save react-markdown-mirror

Usage

``javascript
import React from 'react';
import ReactDOM from 'react-dom';
import Markdown from 'react-markdown-mirror';

ReactDOM.render(, document.getElementById('root'));
`

$3

Name	Type	Value	Discription
title	Boolean	true or false,default true	show or hide
	Object	{visible:Boolean,defaultValue:String,maxLength:Number}	set title visible, default value and max length
toolbar	Boolean	true or false,default true	show or hide
defaultValue	String	string	markdown string value
onChange	Function	value=>{}	triggered when you input
debounceTime	Number	number(ms),default 500ms	wait for converting
extra	ReactNode	ReactNode	operating area, at the end of the line of the Toolbar line
containerClassName	String	string	the wrapper classname
inputClassName	String	string	the input area classname
outputClassName	String	string	the output area classname

$3

1.use onChange prop,you can do something on this callback

`javascript
console.log(value)} />
`

2.use ref

`javascript
const App = () => {
const markdown = useRef();
useEffect(() => {
const value = markdown.current.getValue();
console.log(value);
});
return ;
};
`

$3

also use ref

`javascript
const App = () => {
const markdown = useRef();
useEffect(() => {
const defaultTitle = 'default title';
const defaultMarkdown = '# This is default markdown';
markdown.current.setValue({ title: defaultTitle, markdown: defaultMarkdown });
}, []);
return ;
};
``