Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zamarawka/draft-js-emoji-mart-plugin
Emoji-mart plugin for DraftJS.
https://github.com/zamarawka/draft-js-emoji-mart-plugin
draftjs emoji javascript react
Last synced: about 1 month ago
JSON representation
Emoji-mart plugin for DraftJS.
- Host: GitHub
- URL: https://github.com/zamarawka/draft-js-emoji-mart-plugin
- Owner: zamarawka
- License: mit
- Created: 2019-02-26T23:58:49.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2021-03-04T09:17:03.000Z (almost 4 years ago)
- Last Synced: 2024-11-12T15:02:45.685Z (about 1 month ago)
- Topics: draftjs, emoji, javascript, react
- Language: TypeScript
- Homepage:
- Size: 5.18 MB
- Stars: 14
- Watchers: 2
- Forks: 9
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/zamarawka/draft-js-emoji-mart-plugin/actions)
[](https://www.npmjs.com/package/draft-js-emoji-mart-plugin)
[](https://draftjs.org)
[](https://reactjs.org)
# Emoji-mart integration with DraftJS
*This plugin for [draft-js-editor](https://www.npmjs.com/package/draft-js-plugins-editor)*
[Demo](https://zamarawka.github.io/draft-js-emoji-mart-plugin/)
Package includes its TypeScript Definitions
## Install
```sh
npm install -S draft-js-emoji-mart-plugin
```
Install peer dependencies
```sh
npm install -S emoji-mart draft-js
```
## Usage
```js
import Editor from 'draft-js-plugins-editor';
import createEmojiMartPlugin from 'draft-js-emoji-mart-plugin';
import data from 'emoji-mart/data/apple.json';
import 'emoji-mart/css/emoji-mart.css'
const emojiPlugin = createEmojiMartPlugin({
data,
set: 'apple'
});
// NimblePicker from emoji-mart binded with draftjs
const { Picker } = emojiPlugin;
const MyEditor = ({ editorState, onChange }) => (
{/*
Any props supported by emoji-mart NimblePicker.
Feel free to style it and trigger for view.
*/}
)
export default MyEditor;
```
Checkout `stories/CustomEditor.tsx` for detailed example.
## Configuration Parameters
| Name | Required | Default | Description |
| ---- | -------- | ------- | ----------- |
| data | true | `undefined` | [Dataset](https://github.com/missive/emoji-mart/blob/master/README.md#datasets) from emoji-mart. Used for bind picker and replace emoji in editor. |
| set | true | `undefined` | Addtional param to Dataset, used by emoji-mart. |
| sheetSize | false | 32 | [Sheet size](https://github.com/missive/emoji-mart#sheet-sizes) wich pass to Emoji component from emoji-mart. |
| emojiSize | false | sheetSize / 2 | [Size](https://github.com/missive/emoji-mart/blob/master/README.md#emoji) wich pass to Emoji component from emoji-mart. By default sheetSize / 2. |
| onChange | false | undefined | Call then DraftJS recieve new state. |
## Additional plugin feature
### Emoji component
Plugin provide `Emoji` component, wich could replace native utf-8 emoji by `NimbleEmoji` component from emoji-mart.
```js
// MyEditor.jsx
export const emojiPlugin = createEmojiMartPlugin({
data,
set: 'apple'
});
// Text.jsx
import { emojiPlugin } from './MyEditor.jsx';
const { Emoji } = emojiPlugin;
const TextViewer = ({ props }) => (
Useful text with emoji
);
export default TextViewer;
```
### Emoji RegExp
Useful to find native emoji in string. Could be used with `Emoji` component provided by plugin for replace emoji in plane text.
```js
import { unicodeEmojiRegexp } from 'draft-js-emoji-mart-plugin/lib/constants';
import { emojiPlugin } from './MyEditor.jsx';
const { Emoji } = emojiPlugin;
// Not for production usage.
const parsedText = 'some string with 😈 '.split(unicodeEmojiRegexp).map(term => {
if (term.match(unicodeEmojiRegexp)) {
return
}
return term;
});
console.log(parsedText); // ['some string with', ]
// Render it by React
const MyEmojifiedText = () => (
{parsedText}
);
```
## Older versions
Last version with supports draft-js 0.10 and draft-js-plugins-editor 2.x
There is no changes on plugin usage
```sh
npm install -S [email protected]
```
## Development
Run development env
```sh
npm run watch # for build ts on change
npm run storybook # run sandbox with base example
```
Local build
```sh
npm run lint
npm run build # build ts by babel and generate typings
```
______
Active maintenance with care and ❤️.
Feel free to send a PR.