emogeez-react-components v0.21.1
Emogeez React Components
This module provides react elements to display emojis in your web app. It exposes a popup to choose your emoji. The popup can be populated with emojis with the emogeez-parser store, or you can fetch manually the json file generated with emogeez-generator hosted here(https://cdn.jsdelivr.net/gh/arthur-feral/emogeez@latest/packages/emogeez-generator/emojis/apple/apple.json).
You can test it by running the storybook. clone the project
$ git clone https://github.com/arthur-feral/emogeez.git
$ cd emogeez/packages/emogeez-react-components
$ yarn && yarn run storybook
and go to http://localhost:9001 to explore the components.
How to use
Installation
$ yarn i emogeez-react-components
to be used in your application
you can use the package emogeez-parser
, go to the README for more informations. Shortly you may do something like this:
import parserFactory from 'emogeez-parser';
import React from 'react';
import ReactDOM from 'react-dom';
import emojisComponents from 'emogeez-react-components';
const {
EmojisPopupToggler,
} = emojisComponents;
const {
store,
} = parserFactory();
const addEmojiToTextArea = (emoji /* the emoji data */, event /* click event */) => {
// add the clicked emoji in the textarea or anywhere you want
};
fetchTheme('apple')
.then(() => {
const categories = Object.entries(store.getCategories('apple'));
ReactDOM.render(
<EmojisPopupToggler
categories={categories}
onClickEmoji={addEmojiToTextArea}
/>,
document.getElementById('myContainer')
);
});
Emoji
static propTypes = {
// a prefix before the emoji name
// it will construct the emoji classname
// default will be emoji-grinning-face for example
prefix: PropTypes.string,
// the emoji data from the json
emoji: PropTypes.object.isRequired,
// on click on the emoji
onClick: PropTypes.func,
};
static defaultProps = {
prefix: 'emojis-',
onClick: noop,
};
EmojiPopupToggler
static propTypes = {
// a prefix before the emoji name
// it will construct the emoji classname
// default will be emoji-grinning-face for example
prefix: PropTypes.string,
// an array of categories from the json file
categories: PropTypes.array,
// what to do on click on the emoji
onClickEmoji: PropTypes.func,
// choose to open it on first render
isOpened: PropTypes.bool,
// the popup can memorize the previously selected emojis
// it is stored in the localStorage
historyEnabled: PropTypes.bool,
historyLimit: PropTypes.number,
togglerRenderer: PropTypes.func,
onOpen: PropTypes.func,
onClose: PropTypes.func,
// if you want the popup to be placed according to a parent
// the popup will try to be contained in it
containerClassNameForPlacement: PropTypes.string,
// if you want to unmount the popup from the DOM
// on the last toggler unmount
// it means next time you render a new toggler
// and if it's the only one,
// then we re-render a popup
destroyPopupIfNoToggler: PropTypes.bool,
};
static defaultProps = {
prefix: 'emojis',
categories: [],
onClickEmoji: noop,
isOpened: false,
historyEnabled: true,
historyLimit: 21,
togglerRenderer: (props, state) => (
<button>
<People className={CLASSNAMES.icon} />
</button>
),
onOpen: noop,
onClose: noop,
containerClassNameForPlacement: null,
destroyPopupIfNoToggler: false,
};
Notes
Please contribute if you found it useful! ❤️
return 'enjoy';
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago