Redux Forms Markdown Editor
Redux Forms Markdown Editor
Instalation
Note: Designed for use with Redux Form
yarn add redux-forms-markdown-editor
or
npm install redux-forms-markdown-editor
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
;; const SampleForm = <form onSubmit=handleSubmit> <div> <label>First Name</label> <Field name="firstName" component="input" type="text" placeholder="First Name" /> </div> <div> <label>Bio</label> <Field name="bio" component=ReactMDE placeholder="More info about yourself" /> </div> <button type="submit" disabled=pristine || submitting> Submit </button> </form>; form: 'mde-sample'SampleForm;
Available Props
value
the initial value to pass to the Editor. RequiredonChange
fired when input has changed RequiredtextAreaStyle
Text area styling OptionalbuttonStyle
Styles for the buttons OptionalbuttonContainerStyle
Styled for the buttons container OptionaliconSize
Define the size for all the Icons OptionalbuttonConfig
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: