Popularity
2.2
Growing
Activity
0.0
Stable
119
1
13

Monthly Downloads: 0
Programming language: JavaScript
License: MIT License
Tags: UI Components     Icons     React     Button     Emoji     Slack     Reactions     Like    

react-emoji-react alternatives and similar libraries

Based on the "Icons" category.
Alternatively, view react-emoji-react alternatives based on common mentions on social networks and blogs.

Do you think we are missing an alternative of react-emoji-react or a related project?

Add another 'Icons' Library

README

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.