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

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