/redux-forms-markdown-editor

Markdown Editor built for use with Redux Forms

Primary LanguageJavaScriptMIT LicenseMIT

Redux Forms Markdown Editor

Redux Forms Markdown Editor

Nodei.co badge
Travis CI Build Status NPM version NPM downloads Dependency Status

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

import { reduxForm, Field } from 'redux-form';
import ReactMDE from 'redux-forms-markdown-editor';

const SampleForm = ({ handleSubmit, pristine, submitting }) => (
  <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>
);

export default reduxForm({
  form: 'mde-sample'
})(SampleForm);

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:

Credits

jaszhix

react-markdown