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 theonChange
event.commands?: ICommand[]
: An array ofICommand
, which, each one, contain acommands
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 makeMarkdown 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. ThevisiableDragbar=true
value is valid.minHeights?: number=100
: Minimum drag height. ThevisiableDragbar=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.