README
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.
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} />;
};