8 |
9 | ### Install
10 |
11 | `npm install react-emoji-react --save`
12 |
13 | ### Use
14 |
15 | ```js
16 | import EmojiReact from 'react-emoji-react';
17 | import React, { Component } from 'react';
18 | import { render } from 'react-dom';
19 |
20 | const emojis = [
21 | {
22 | name: 'rage',
23 | count: 2
24 | },
25 | {
26 | name: 'blush',
27 | count: 1
28 | },
29 | {
30 | name: 100,
31 | count: 3
32 | },
33 | {
34 | name: 'grinning',
35 | count: 2
36 | }
37 | ];
38 |
39 | class ReactingComponent extends Component {
40 | constructor() {
41 | super();
42 | this.state = {
43 | emojis
44 | };
45 | }
46 |
47 | onReaction(name) {
48 | const emojis = this.state.emojis.map(emoji => {
49 | if (emoji.name === name) {
50 | emoji.count += 1;
51 | }
52 | return emoji;
53 | });
54 | this.setState({ emojis });
55 | }
56 |
57 | onEmojiClick(name) {
58 | console.log(name);
59 | const emojis = this.state.emojis.concat([{name, count: 1}]);
60 | this.setState({ emojis });
61 | }
62 |
63 | render() {
64 | return (
65 | onClick(name)}
84 | onMouseEnter={() => this.setState({hovered: true})}
85 | onMouseLeave={() => this.setState({hovered: false})}
86 | >
87 |
90 | );
91 | }
92 | }
93 |
94 | const PickerEmoji = ({onClick, image}) => (
95 | onClick()}>
96 | {image}
97 |
98 | );
99 |
100 | const EmojiWrapper = ({reactions, onReaction}) => {
101 | return (
102 |
103 | {reactions.map(({name, count}) => (
104 |
107 | );
108 | }
109 |
110 | const SINGLE_EMOJI_HEIGHT = 23;
111 | const LOAD_HEIGHT = 500;
112 | const EMOJIS_ACROSS = 8
113 |
114 | class EmojiSelector extends Component {
115 | constructor() {
116 | super();
117 | this.state = {
118 | filter: "",
119 | xHovered: false,
120 | scrollPosition: 0
121 | };
122 | this.onScroll = this.onScroll.bind(this);
123 | }
124 |
125 | onScroll() {
126 | this.setState({ scrollPosition: this.emojiContainer.scrollTop })
127 | }
128 |
129 | componentDidMount() {
130 | this.emojiContainer.addEventListener('scroll', this.onScroll);
131 | }
132 |
133 | componentWillUnMount() {
134 | this.emojiContainer.removeEventListener('scroll', this.onScroll);
135 | }
136 |
137 | render() {
138 | const { showing, onEmojiClick, close } = this.props;
139 | let xStyle = {
140 | color: '#E8E8E8',
141 | fontSize: '20px',
142 | cursor: 'pointer',
143 | float: 'right',
144 | marginTop: '-32px',
145 | marginRight: '5px'
146 | };
147 | if (this.state.xHovered) {
148 | xStyle.color = '#4fb0fc';
149 | }
150 | const searchInput = (
151 |
152 | this.setState({filter: e.target.value})}
158 | />
159 |
160 | );
161 | const x = (
162 | {
165 | this.setState({ xHovered: false});
166 | close();
167 | }}
168 | onMouseEnter={() => this.setState({ xHovered: true})}
169 | onMouseLeave={() => this.setState({ xHovered: false})}
170 | >
171 | x
172 |
173 | );
174 | const show = emoji.filter(name => name.indexOf(this.state.filter) !== -1);
175 | const emptyStyle = {
176 | height: '16px',
177 | width: '16px',
178 | display: 'inline-block'
179 | };
180 | const emojis = show.map((em, i) => {
181 | const row = Math.floor((i + 1) / EMOJIS_ACROSS);
182 | const pixelPosition = row * SINGLE_EMOJI_HEIGHT;
183 | const position = this.state.scrollPosition + LOAD_HEIGHT;
184 | const shouldShowImage = pixelPosition < position && (position - pixelPosition) <= LOAD_HEIGHT;
185 | const image = shouldShowImage ?
199 | {searchInput}
200 | {x}
201 |
208 | );
209 | }
210 | }
211 |
212 | export default class EmojiReact extends Component {
213 | constructor() {
214 | super();
215 | this.state = { hovered: false, showSelector: false };
216 | this.onKeyPress = this.onKeyPress.bind(this);
217 | this.closeSelector = this.closeSelector.bind(this);
218 | this.onClick = this.onClick.bind(this);
219 | }
220 |
221 | onKeyPress(e) {
222 | if (e.keyCode === 27) {
223 | this.closeSelector();
224 | }
225 | }
226 |
227 | onClick({ target }) {
228 | if (!this.node.contains(target) && this.state.showSelector) {
229 | this.closeSelector();
230 | }
231 | }
232 |
233 | componentDidMount() {
234 | document.addEventListener('click', this.onClick);
235 | document.addEventListener('keydown', this.onKeyPress);
236 | }
237 |
238 | componentWillUnMount() {
239 | document.removeEventListener('click', this.onClick);
240 | document.removeEventListener('keydown', this.onKeyPress);
241 | }
242 |
243 | closeSelector() {
244 | this.setState({ showSelector: false });
245 | }
246 |
247 | render() {
248 | const { reactions, onReaction, onEmojiClick } = this.props;
249 | const plusButtonStyle = this.state.hovered ? {...wrapperStyle, ...wrapperHover} : wrapperStyle;
250 | const plusStyle = this.state.hovered ? {...countStyle, ...countHover} : countStyle;
251 | const selector = (
252 | this.emojiContainer = node}
204 | >
205 | {emojis}
206 |
207 | this.node = node}>
253 |
267 | );
268 | return (
269 | this.setState({ hovered: true })}
256 | onMouseLeave={() => this.setState({ hovered: false}) }
257 | onClick={() => this.setState({ showSelector: !this.state.showSelector})}
258 | >
259 | +
260 |
261 |
270 |
273 | );
274 | }
275 | }
276 |
--------------------------------------------------------------------------------
/webpack.demo.config.js:
--------------------------------------------------------------------------------
1 | var path = require('path');
2 | var webpack = require('webpack');
3 |
4 | module.exports = {
5 | context: path.join(__dirname),
6 | devtool: 'source-map',
7 | entry: {
8 | demo: "./demo/index.js"
9 | },
10 | output: {
11 | path: path.join(__dirname) + '/demo',
12 | filename: "[name].js"
13 | },
14 | module: {
15 | loaders: [
16 | {
17 | test: /\.js?$/,
18 | loader: 'babel',
19 | query: {
20 | presets: ['react', 'es2015'],
21 | plugins: ['transform-object-rest-spread']
22 | },
23 | include: path.join(__dirname) + '/demo'
24 | },
25 | { test: /\.json$/, loader: require.resolve("json-loader") }
26 | ]
27 | },
28 | };
--------------------------------------------------------------------------------