React-markdown-area NPM

React-Markdown-Area

An enhanced textarea control built with and for React. Initially built for use in tuts-wanted.

Installation

The easiest way to use React-Markdown-Area is to install it from NPM and include it in your own React build process (using Browserify, etc).

It is made with ES7 but the install file is compiled to ES5 to be compatible with more projects.

npm install react-markdown-area --save

Basic Usage

React-Markdown-Area is made up of components and containers. Components are stateless, and the containers it comes with carry state. The containers are easy to use and great for beginners. More advanced users will benefit from creating their own containers that use the react-markdown-area components. You can think of them as helpers

MarkedArea

var MarkedArea = require('react-markdown-area').MarkedArea;

<MarkedArea />

MarkedArea Props

react-markdown-area is really a suite of markdown text editing helper components and fully working containers, you can also customize <MarkedArea/>:

You can also use the import statement instead of require

LiveMarkedArea

The helpers components explained later also make up a fully functional live markdown editor with preview. You can use this for inspiration, or customize it, or make your own:

 import { LiveMarkedArea } from 'react-markdown-area';

LiveMarkedArea has similar props to MarkedArea. Not all props are listed in this readme, to see them all, take a look at the source.

Building your own with helpers.

Since version 0.2.0, react-markdown-area now lets you compose the text editor in your own way - allowing you to have more flexibility with the flow of state.

import {
  MarkedInput,
  MarkedPreview,
  Markedtoolbar } from 'react-markdown-area';

// Here is a live preview editor


export class LiveMarkedArea extends React.Component {
    constructor(props) {
    super(props);
    this.state = {
      value: props.defaultValue ? props.defaultValue : ''
    };
  }
  static defaultProps = {
    id: 'mmc-marked-area',
    label: '',
    classNames: {
      root: 'marked-area',
      header: 'marked-area-header',
      activeButton: 'marked-area-button active',
      defaultButton: 'marked-area-button',
      helpLink: 'marked-area-help-link',
      textContainer: 'marked-area-text-container',
      liveDivider: 'marked-area-live-divider'
    }
  };
  handleTextChange = (e) => {
    this.setState({value: e.target.value});
  };
  render() {
    let {id, label, classNames, placeholder} = this.props;
    let {value} = this.state;
    return (
    <section className={classNames.root}>

      <header className={classNames.header}>
        <label htmlFor={id}>{label}</label>
      </header>

        <MarkedInput
          placeholder={placeholder}
          classNames={classNames}
          onChange={this.handleTextChange}
          value={value} />

        <MarkedPreview classNames={classNames}
          value={value} />

    </section>
    );
  }
}