a clone of slack emoji reactions in react
Clone or download
Latest commit 85d45b8 Jun 28, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo initial commit Feb 8, 2016
src add px suffix in preperation for react 15 and relax peer dep Apr 3, 2016
.babelrc initial commit Feb 8, 2016
.gitignore close selector if click outside component Feb 8, 2016
.npmignore add npmignore and prepublish script Feb 8, 2016
README.md Update README.md Jun 29, 2017
package.json 0.3.0 Apr 3, 2016
webpack.demo.config.js initial commit Feb 8, 2016

README.md

React Emoji React

A clone (eventually) of slack emoji reactions as a react component

Click here for a demo.

Install

npm install react-emoji-react --save

Use

import EmojiReact from 'react-emoji-react';
import React, { Component } from 'react';
import { render } from 'react-dom';

const emojis = [
  {
    name: 'rage',
    count: 2
  },
  {
    name: 'blush',
    count: 1
  },
  {
    name: 100,
    count: 3
  },
  {
    name: 'grinning',
    count: 2
  }
];

class ReactingComponent extends Component {
  constructor() {
    super();
    this.state = {
      emojis
    };
  }

  onReaction(name) {
    const emojis = this.state.emojis.map(emoji => {
      if (emoji.name === name) {
        emoji.count += 1;
      }
      return emoji;
    });
    this.setState({ emojis });
  }

  onEmojiClick(name) {
    console.log(name);
    const emojis = this.state.emojis.concat([{name, count: 1}]);
    this.setState({ emojis });
  }

  render() {
    return (
      <EmojiReact 
        reactions={this.state.emojis} 
        onReaction={(name) => this.onReaction(name)} 
        onEmojiClick={(name) => this.onEmojiClick(name)}
      />
    );
  }
}


render(<ReactingComponent />, document.getElementById('app'));

Args

  • reactions - an array of current emoji reactions, reactions are objects containing name and count.
  • onReaction - fired when a current reaction is clicked.
  • onEmojiClick - fired when a new emoji is selected.