@uiw/react-md-editor

A markdown editor with preview, implemented with React.js and TypeScript.

Install

npm i @uiw/react-md-editor

Using

import React from "react";
import ReactDOM from "react-dom";
import MEDitor from '@uiw/react-md-editor';

export default function App() {
  const [value, setValue] = React.useState("**Hello world!!!**");
  return (
    <div className="container">
      <MEDitor
        value={value}
        onChange={setValue}
      />
    </div>
  );
}

• Demo preview for CodeSandbox
• Demo preview for Github gh-pages

Props

• value: string: The Markdown value.
• onChange?: (value: string): Event handler for the onChange event.
• commands?: ICommand[]: An array of ICommand, which, each one, contain a commands property. If no commands are specified, the default will be used. Commands are explained in more details below.
• autoFocus?: number=true: Can be used to make Markdown Editor focus itself on initialization.
• previewOptions?: ReactMarkdown.ReactMarkdownProps: This is reset react-markdown settings.
• height?: number=200: The height of the editor.
• visiableDragbar?: boolean=true: Show drag and drop tool. Set the height of the editor.
• fullscreen?: boolean=false: Show markdown preview.
• preview?: 'live' | 'edit' | 'preview': Default value live, Show markdown preview.
• maxHeight?: number=1200: Maximum drag height. The visiableDragbar=true value is valid.
• minHeights?: number=100: Minimum drag height. The visiableDragbar=true value is valid.

Development

npm run watch:types  # Listen create type files.
npm run watch:ts     # Listen compile .tsx files.
npm run doc:dev      # Preview code example.

License

Licensed under the MIT License.