react-svg-emoji v1.1.9-beta

React-svg-emoji

React emoji 表情包组件

• 支持定制所有样式
• 可定制多语言
• 未来可替换所有表情

安装

npm install react-svg-emoji --save-dev

使用

import ReactSvgEmoji from "react-svg-emoji/es5";

const { Emoji, parseToEmoji, insertStr, getCursortPosition } = ReactSvgEmoji;


onSelect(text, key, data) {
  // 向光标处插入表情字符串
  var index = getCursortPosition(document.querySelector('#input'))
  var value = insertStr(this.state.value, index, text)
  // 解析表情串以渲染
  var html = parseToEmoji(value)

  this.setState({
    value: value,
    html: html,
  })
}

onChange(e) {
  var html = parseToEmoji(e.target.value)
  this.setState({
    value: e.target.value,
    html: html,
  })
}


render(){
  const style={
    // 根元素样式
    root: {},
    // 入口图标样式
    icon: {},
    pop: {
      //选择框隐藏的样式
      ...,
      hover: {
        //选择框展示的样式
        ...
      }
    },
    // 单个表情的样式
    item: {},

  }

  return (
    <>
      
     <Emoji
        // 表情框中表情的尺寸
        width={24}
        height={24}
        // 入口图标的尺寸
        iconWidth={20}
        iconHeight={20}
        // 更加详细的样式定制
        style={style}
        // 选择表情的回调
        onSelect={this.onSelect.bind(this)}
      />

      <!-- 输入框输入表情 -->
      <input id="input" value={this.state.value} onChange={this.onChange.bind(this)}>

      <!-- 解析表情 -->
      <div dangerouslySetInnerHTML={{ __html: this.state.html }} />
    </>
  )
}

1.使用默认入口及样式

import ReactSvgEmoji from "react-svg-emoji/es5";

const { Emoji, parseToEmoji, insertStr, getCursortPosition } = ReactSvgEmoji;

...

onSelectDemo1(text, key, data) {
  var index = getCursortPosition(document.querySelector('#input1'))
  var value = insertStr(this.state.value1, index, text)
  var html = parseToEmoji(value)
  this.setState({
    value1: value,
    html1: html,
  })
}

onChange1(e) {
  var html = parseToEmoji(e.target.value)
  this.setState({
    value1: e.target.value,
    html1: html,
  })
}

...

const style = {
  pop: {
    width: '200px'
  },
}

...

<Emoji
  style={style}
  onSelect={this.onSelectDemo1.bind(this)}
/>

<input
  id='input1'
  style={{ display: 'block', padding: "10px 10px", width: "90%", border: '1px solid #ddd', borderRadius: '4px', color: '#939393', fontSize: '16px' }}
  value={this.state.value1}
  onChange={this.onChange1.bind(this)}
></input>

<div style={{ margin: '10px' }} >
  转化展示效果：
<p dangerouslySetInnerHTML={{ __html: this.state.html1 }} />

效果

2.定制入口启动按钮

定制一个button按钮作为入口

import ReactSvgEmoji from "react-svg-emoji/es5";

const { Emoji, parseToEmoji, insertStr, getCursortPosition } = ReactSvgEmoji;              

...

onSelectDemo2(text, key, data) {
  var index = getCursortPosition(document.querySelector('#input2'))
  var value = insertStr(this.state.value2, index, text)
  var html = parseToEmoji(value)
  this.setState({
    value2: value,
    html2: html,
  })
}

onChange2(e) {
  var html = parseToEmoji(e.target.value)
  this.setState({
    value2: e.target.value,
    html2: html,
  })
}
       
...

const style = {
  pop: {
    width: '200px'
  },
}

...

<Emoji
  icon={<span> 表情</span>}
  style={style}
  onSelect={this.onSelectDemo2.bind(this)}
/>

<input
  id='input2'
  style={{ display: 'block', padding: "10px 10px", width: "90%", border: '1px solid #ddd', borderRadius: '4px', color: '#939393', fontSize: '16px' }}
  value={this.state.value2}
  onChange={this.onChange2.bind(this)}
></input>

<div style={{ margin: '10px' }} >
  转化展示效果：
  <p dangerouslySetInnerHTML={{ __html: this.state.html2 }} />
</div>

效果

3.定制样式

改变尺寸和布局

import ReactSvgEmoji from "react-svg-emoji/es5";

const { Emoji, parseToEmoji, insertStr, getCursortPosition } = ReactSvgEmoji;   

...

onSelectDemo3(text, key, data) {
  var index = getCursortPosition(document.querySelector('#input3'))
  var value = insertStr(this.state.value3, index, text)
  var html = parseToEmoji(value)
  this.setState({
    value3: value,
    html3: html,
  })
}

onChange3(e) {
  var html = parseToEmoji(e.target.value)
  this.setState({
    value3: e.target.value,
    html3: html,
  })
}
       
...

const style = {
  icon: {
    width: '50px',
    height: '50px',
  },
  pop: {
    position: 'absolute',
    padding: '10px',
    width: '800px',
    top: '25px',
    hover: {
      display: 'flex',
      flexWrap: 'wrap',
      justifyContent: 'flex-start',
      boxShadow: 'none',
      border:'3px solid lightgreen'
    }
  },
  item: {
    width: '12px',
    height: '12px',
    margin: '2px',
  }
}

...

<Emoji
  icon={<span> 表情</span>}
  style={style}
  onSelect={this.onSelectDemo3.bind(this)}
/>

<input
  id='input3'
  style={{ display: 'block', padding: "10px 10px", width: "90%", border: '1px solid #ddd', borderRadius: '4px', color: '#939393', fontSize: '16px' }}
  value={this.state.value3}
  onChange={this.onChange3.bind(this)}
></input>

<div style={{ margin: '10px' }} >
  转化展示效果：
  <p dangerouslySetInnerHTML={{ __html: this.state.html2 }} />
</div>

效果

4.直接展示选择层

import ReactSvgEmoji from "react-svg-emoji/es5";

const { Emoji, parseToEmoji, insertStr, getCursortPosition } = ReactSvgEmoji;              
    
...

onSelectDemo4(text, key, data) {
  var index = getCursortPosition(document.querySelector('#input2'))
  var value = insertStr(this.state.value4, index, text)
  var html = parseToEmoji(value)
  this.setState({
    value4: value,
    html4: html,
  })
}

onChange4(e) {
  var html = parseToEmoji(e.target.value)
  this.setState({
    value4: e.target.value,
    html4: html,
  })
}

...

const style = {
  pop: {
    position: 'relative',
    padding: '10px',
    width: '400px',
    hover: {
      display: 'flex',
      flexWrap: 'wrap',
      justifyContent: 'flex-start',
      boxShadow: 'none',
      border: '1px solid lightgreen'
    }
  },
}

...

<Emoji
  model="manual"
  visible={!!this.state.visible}
  style={style4}
  onSelect={this.onSelectDemo4.bind(this)}
/>

<button onClick={()=>{
  this.setState({
    visible: !this.state.visible
  })
}}>打开、关闭表情</button>

<input
  id='input4'
  style={{ display: 'block', padding: "10px 10px", width: "90%", border: '1px solid #ddd', borderRadius: '4px', color: '#939393', fontSize: '16px' }}
  value={this.state.value4}
  onChange={this.onChange4.bind(this)}
></input>

<div style={{ margin: '10px' }} >
  转化展示效果：
  <p dangerouslySetInnerHTML={{ __html: this.state.html2 }} />
</div>

效果

5.多语言

import ReactSvgEmoji from "react-svg-emoji/es5";

const { Emoji, parseToEmoji, insertStr, getCursortPosition } = ReactSvgEmoji;           
    
...

state = {
  lang: 'zh_CN'
}

...

onSelect(text, key, data) {
  var index = getCursortPosition(document.querySelector('#input'))
  var value = insertStr(this.state.value, index, text)
  var html = parseToEmoji(value, null, this.state.lang)
  this.setState({
    value: value,
    html: html,
  })
}

onChange(e) {
  var html = parseToEmoji(e.target.value)
  this.setState({
    value: e.target.value,
    html: html,
  })
}



...

<Emoji
  lang={this.state.lang}
  onSelect={this.onSelect.bind(this)}
/>

<button style={{ margin: '10px' }}
onClick={() => {
  this.setState({
    lang: this.state.lang === 'zh_CN' ? 'en_US' : 'zh_CN'
  })
}}>{this.state.lang === 'zh_CN' ? 'English' : '中文'}</button>

<input
  id='input'
  style={{ display: 'block', padding: "10px 10px", width: "90%", border: '1px solid #ddd', borderRadius: '4px', color: '#939393', fontSize: '16px' }}
  value={this.state.value}
  onChange={this.onChange.bind(this)}>
</input>

效果

API

• Document English

1. 组件API

2.Tool Function Api

源码中使用的默认的样式

/**
 * 默认样式
 */
const defaultProps = {
  width: 24,
  height: 24,
  iconWidth: 20,
  iconHeight: 20,
  style: {
    // 根样式
    root: {
      position: 'relative',
      textAlign: 'left'

    },
    // 启动图标样式
    icon: {
      display: 'inline-block',
      margin: '10px',
      cursor: 'pointer',
      borderRadius: '2px',
      alignItems: 'center',
      justifyContent: 'center'
    },
    // 表情列表盒子pop框样式
    pop: {
      position: 'absolute',
      bottom: '35px',
      padding: '10px',
      display: 'none',
      background: '#fff',
      width: '390px',
      height: 'fit-content',
      hover: {
        display: 'flex',
        flexWrap: 'wrap',
        justifyContent: 'space-between',
        boxShadow: '0px 2px 8px 0px rgba(0,0,0,0.15)'
      }
    },
    // 单个表情盒子样式
    item: {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      padding: '2px',
      margin: '10px',
      cursor: 'pointer',
      borderRadius: '2px',
      alignItems: 'center',
      justifyContent: 'center',
      transition: 'all 0.1s linear',
    },

  }
}

注意

• 你可以通过 style属性改写所有样式
• 单个表情的样式、选中样式, 请通过覆盖样式属性react-svg-emoji-item进行改写

例子

你可以进入react-svg-emoji下载源码，然后通过运行下面的命令看例子：

npm i

npm start

有可能你也想扩展代码，修改需要监听

npm run watch

demo示例如下

Author

jyjin

Change Log

• 1.1.7 2020.07.01

  Update by jyjin

  发版

  • 1.0.6-beta发布正式版

• 1.1.6-beta 2020.06.30

  Update by jyjin

  完善样式

  • 增加标签样式标记类名，方便用户覆盖

• 1.1.3-beta - 1.1.5-beta 2020.06.29

  Update by jyjin

  移动端兼容

  • embed 更新为 img渲染

• 1.1.2-beta 2020.06.29

  Update by jyjin

  bug修复 + 更新功能

  • 修复ok trumpet图标
  • 增加多语言支持

• 1.1.1 / 1.1.1-beta 2020.06.28 Update by jyjin

  完善文档

  • 在线图片引用
  • github readme table修复
  • 中英文档切换

• 1.1.0 / 1.1.0-beta 2020.06.28

  Update by jyjin

  完整功能版

  • 添加icon
  • 整理style接口
  • bug修复
  • 整理README

• 1.0.0 - 1.0.5 / 1.0.0-beta - 1.0.5-beta 2020.06.23

  Create by jyjin

  • 框架搭建、配置
  • 流程代码

Listense

MIT