https://github.com/conorhastings/react-emoji-react

a clone of slack emoji reactions in react
https://github.com/conorhastings/react-emoji-react

Last synced: 3 months ago
JSON representation

a clone of slack emoji reactions in react

• Host: GitHub
• URL: https://github.com/conorhastings/react-emoji-react
• Owner: conorhastings
• Created: 2016-02-08T00:15:06.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2017-06-29T02:20:42.000Z (over 7 years ago)
• Last Synced: 2024-10-14T12:15:58.050Z (3 months ago)
• Language: JavaScript
• Size: 2.43 MB
• Stars: 120
• Watchers: 2
• Forks: 13
• Open Issues: 11
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-list - react-emoji-react - A clone of slack emoji reactions in react. (Demos / Icons)

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

```js

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 (

       this.onReaction(name)} 

        onEmojiClick={(name) => this.onEmojiClick(name)}

      />

    );

  }

}

render(, 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.