react-markdown-mirror

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

import React from 'react';
import ReactDOM from 'react-dom';
import Markdown from 'react-markdown-mirror';
 
ReactDOM.render(<Markdown />, document.getElementById('root'));

Props

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

Get value

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

<Markdown onChange={value => console.log(value)} />

2.use ref

const App = () => {
  const markdown = useRef();
  useEffect(() => {
    const value = markdown.current.getValue();
    console.log(value);
  });
  return <Markdown ref={markdown} />;
};

Set value

also use ref

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