Skip to content
React Markdown editor with preview and drag and drop image support
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs
src
.babelrc
.codeclimate.yml
.editorconfig
.eslintrc
.gitignore
.prettierignore
.prettierrc
.travis.yml
.yarnrc
LICENSE
README.md
package.json
setupTests.js
yarn.lock

README.md

react-markdown-editor

npm (scoped)
Build Status Coverage Status Code Climate bitHound Overall Score
Dependency Status peerDependency Status devDependency Status

NPM

React Markdown editor with preview, built with react-markdown-renderer.

Demo

http://insidersbyte.github.io/react-markdown-editor

Installing

npm install @insidersbyte/react-markdown-editor --save

Basic Usage

import React from 'react';
import ReactDOM from 'react-dom';
import MarkdownEditor from '@insidersbyte/react-markdown-editor';
import '@insidersbyte/react-markdown-editor/dist/css/react-markdown-editor.css';

class App extends React.Component {
    constructor() {
        super();

        this.state = {
            markdown: '# This is a H1  \n## This is a H2  \n###### This is a H6',
        };

        this.updateMarkdown = this.updateMarkdown.bind(this);
    }

    updateMarkdown(event) {
        this.setState({ markdown: event.target.value });
    }

    render() {
        return (
            <MarkdownEditor
                value={this.state.markdown}
                onChange={this.updateMarkdown}
            />
        );
    }
}

ReactDOM.render(<App />, document.getElementById('app'));

Props

  • value (string) - the raw markdown that will be converted to html (required)
  • onChange (function) - called when a change is made (required)
  • options (object) - the options for remarkable (see here) (default: { })

Styles

You can either write your own css for this component or use the one provided. If you want to write your own look at react-markdown-editor.styl for an idea on how to style this component.

Contributing

Contributions are very welcome!

Please note that by submitting a pull request for this project, you agree to license your contribution under the MIT License to this project.

License

Published under the MIT License.

You can’t perform that action at this time.