Skip to content
This repository has been archived by the owner on Jun 1, 2021. It is now read-only.

Markdown Editor built for use with Redux Forms

License

Notifications You must be signed in to change notification settings

RemeJuan/redux-forms-markdown-editor

Repository files navigation

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