GitHub - draft-js-plugins/draft-js-plugins: React Plugin Architecture for Draft....

 4 years ago
source link: https://github.com/draft-js-plugins/draft-js-plugins
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

DraftJS Plugins

Draft JS Plugins Logo

High quality plugins with great UX on top of DraftJS.

Available Plugins (incl. Docs)

Built by the community

Live Example & Documentation

Checkout the website!


First, install the editor with npm:

$ npm install @draft-js-plugins/editor --save

Then import the editor somewhere in your code and you're ready to go!

import Editor from '@draft-js-plugins/editor';




An editor component accepting plugins. see source

Props Description Required
editorState see here *
onChange see here *
plugins an array of plugins
decorators an array of custom decorators
defaultKeyBindings bool
defaultBlockRenderMap bool
all other props accepted by the DraftJS Editor except decorator see here


import React, { Component } from 'react';
import Editor from '@draft-js-plugins/editor';
import createHashtagPlugin from '@draft-js-plugins/hashtag';
import createLinkifyPlugin from '@draft-js-plugins/linkify';
import { EditorState } from 'draft-js';

const hashtagPlugin = createHashtagPlugin();
const linkifyPlugin = createLinkifyPlugin();

const plugins = [linkifyPlugin, hashtagPlugin];

export default class UnicornEditor extends Component {
  state = {
    editorState: EditorState.createEmpty(),

  onChange = editorState => {

  render() {
    return (

How to write a Plugin

Feel free to copy any of the existing plugins as a starting point.In this repository you can also find a Guide on how to create a plugin, including a description of the supported features. In addition you can contact @nikgraf directly in case you need help or simply open a Github Issue!

Discussion and Support

Join the channel #draft-js-plugins after signing into the DraftJS Slack organization or check out our collection of frequently asked questions here: FAQ.


Check out our Contribution Guide.

Learn about why Draft.js and how to use DraftJS Plugins

In this talk Nik Graf explained the ContentState structure of a Draft.js Editor as well as explained how to use plugins.



About Joyk

Aggregate valuable and interesting links.
Joyk means Joy of geeK