React Emoji React
made with React

React Emoji React

这是基于Slack表情回复的React组件。

相关问答
查看全部
简介及使用教程

React Emoji React是基于Slack表情回复的React组件。

安装

Npm

npm i react-emoji-react

Yarn

yarn add react-emoji-react

使用

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'));

示例

作者

Conor Hastings

相关项目

这是一个动画加载骨架组件。
这是一个是一个iOS,Android和React Native库。
这是一个可以将SVG图片有变换效果的组件。
这是一个基于React.js粒子效果组件。
这是一个根据页面滚动位置旋转元素的组件。
这是一个基于React.js的动画对话框的集合。
这是一个可调整大小、排序的窗格组件。