JSPM

  • Created
  • Published
  • Downloads 168805
  • Score
    100M100P100Q172244F
  • License MIT

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

Package Exports

  • @uiw/react-md-editor

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@uiw/react-md-editor) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Markdown Editor for React

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

Install

npm i @uiw/react-md-editor

Using

import MEDitor from '@uiw/react-md-editor';

import * as 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!!!**");
  const [selectedTab, setSelectedTab] = React.useState("write");
  return (
    <div className="container">
      <MEDitor
        value={value}
        onChange={setValue}
      />
    </div>
  );
}

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?: boolean=true: 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 # Listen compile .tsx files.
npm run build # compile .tsx files.

npm run doc

License

Licensed under the MIT License.