Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including @insidersbyte/react-markdown-editor with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. var reactMarkdownEditor = require("@insidersbyte/react-markdown-editor")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@insidersbyte/react-markdown-editor v1.0.0

React Markdown editor with preview and drag and drop image support

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.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free