Nightly Perpetrated Mischief

    redux-forms-markdown-editor

    1.1.8 • Public • Published

    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

    Install

    npm i redux-forms-markdown-editor

    DownloadsWeekly Downloads

    134

    Version

    1.1.8

    License

    MIT

    Unpacked Size

    461 kB

    Total Files

    12

    Last publish

    Collaborators

    • remejuan