Need help with draft-js-plugins?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

draft-js-plugins
3.8K Stars 905 Forks MIT License 2.9K Commits 18 Opened issues

Description

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

Services available

!
?

Need anything else?

Contributors list

# 2,680
OCaml
serverl...
React
reasonm...
846 commits
# 30,191
CSS
Svelte
React
Shell
156 commits
# 1,731
minific...
svgo
coffees...
mjml
49 commits
# 29,597
truffle...
nextjs
solidit...
reasonm...
44 commits
# 168
JavaScr...
GraphQL
Redux
redux-s...
37 commits
# 66,307
CSS
HTML
Shell
vuejs
34 commits
# 10,594
Shell
draft-j...
reactjs
nextjs
33 commits
# 105,460
React
Bootstr...
CSS
HTML
27 commits
# 13,270
GraphQL
React N...
Objecti...
Mongoos...
22 commits
# 94,582
React
HTML
GraphQL
Redux
21 commits
# 128,221
React
HTML
CSS
sticker...
13 commits
# 103,654
CSS
js
steem
React
12 commits
# 119,601
PHP
vercel
express...
GraphQL
11 commits
# 170,882
React
Shell
HTML
CSS
9 commits
# 109,502
Markdow...
React
HTML
Webpack
8 commits
# 25,710
JavaScr...
Markdow...
Vue.js
vuejs
8 commits
# 179,054
React
Shell
HTML
CSS
8 commits
# 152,380
Shell
HTML
CSS
sticker...
8 commits
# 78,422
PHP
CSS
updater
angular...
8 commits
# 170,009
CSS
React
Shell
sticker...
8 commits

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!

Usage

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';

Documentation

@draft-js-plugins/editor

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 | |

Usage:

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 => { 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.

Development

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.

License

MIT

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.