by draft-js-plugins

draft-js-plugins / draft-js-plugins

React Plugin Architecture for Draft.js including Slack-Like Emojis, FB-Like Mentions and Stickers

3.6K Stars 861 Forks Last release: Not found MIT License 2.5K Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

DraftJS Plugins

Draft JS Plugins Logo

High quality plugins with great UX on top of DraftJS.

Build Status

Available Plugins (incl. Docs)

Built by the community

Live Example & Documentation

Checkout the website!


First, install the editor with

$ 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-hashtag-plugin';
import createLinkifyPlugin from 'draft-js-linkify-plugin';
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) => { this.setState({ 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.


This project was initiated by Nik Graf but is currently going un-maintained. If you'd like to become a maintainer, please get involved by contributing, if you have any questions please feel free to [reach out in this https://github.com/draft-js-plugins/draft-js-plugins/issues/1407#issuecomment-629710454).



We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.