mde-react

React Markdown Editor

Markdown editor built in react

Instalation

yarn add react-mde

or

npm install react-mde

Features

• Zero dependencies on other css frameworks or icon libraries.
• Supports React 16.
• Bold, italics, header, ordered/unordered lists, code block, link, image, and YouTube buttons.
• Quote block HTML button.
• Clicking an editor button with no text selected will position the cursor where you can start typing with formatted Markdown.
• Preview mode rendered with react-markdown.
• Configurable icon displays.

Usage

import ReactMDE from 'react-mde';
 
const Editor = ({ details, onChangeHandler }) => (
  <div>
    <ReactMDE
      value={details}
      onChange={onChangeHandler}
    />
  </div>
);

Available Props

• value the initial value to pass to the Editor. Required
• onChange fired when input has changed Required
• textAreaStyle Text area styling Optional
• buttonStyle Styles for the buttons Optional
• buttonContainerStyle Styled for the buttons container Optional
• iconSize Define the size for all the Icons Optional
• buttonConfig An object to control which buttons to display Optional

Button config keys

buttonConfig: {
  bold: true,
  italic: true,
  heading: true,
  orderedList: true,
  unorderedList: true,
  blockQuote: true,
  html: true,
  url: true,
  image: true,
  youtube: true,
  canPreview: true,
}

History

Discover the release history by heading on over to the releases page.

License

Unless stated otherwise all works are:

• Copyright © 2017+ Reme Le Hane

and licensed under:

• MIT License

Credits

jaszhix

react-markdown