redux-forms-markdown-editor

Redux Forms Markdown Editor

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
redux-forms-markdown-editor
1.1.84 years ago5 years agoMinified + gzip package size for redux-forms-markdown-editor in KB

Readme


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:

and licensed under:

Credits

jaszhix
react-markdown