Emojify React Component

emojify.coffee

React = require 'react'
punycode = require 'punycode'

HOST = 'https://assets-cdn.github.com/images/icons/emoji/unicode/'

isEmojiCode = (charCode) ->
  (charCode >= 0x1f300 and charCode <= 0x1f5ff) or
  (charCode >= 0x1f600 and charCode <= 0x1f64f) or
  (charCode >= 0x1f680 and charCode <= 0x1f6ff) or
  (charCode >= 0x2600 and charCode <= 0x26ff) or
  (charCode >= 0x2700 and charCode <= 0x27ff)

emojiTransform = (text) ->
  decoded = punycode.ucs2.decode(text)
  entries = []
  decoded.forEach (charCode, idx) ->
    if isEmojiCode(charCode)

      # emoji char encountered, insert img tag
      hexCode = charCode.toString(16)
      entries.push(React.DOM.img(
        src: HOST + hexCode + ".png"
        key: idx
        className: 'emojify'
      ))
    else
      char = punycode.ucs2.encode([charCode])
      lastIdx = entries.length - 1
      if typeof entries[lastIdx] is "string"
        entries[lastIdx] += char
      else
        entries.push char
    return

  entries

module.exports = React.createClass
  displayName: 'Emojify'
  propTypes:
    text: React.PropTypes.string.isRequired

  shouldComponentUpdate: (nextProps) ->
    nextProps.text isnt @props.text

  supportsEmoji: ->
    if window?
      Modernizr.emoji
    else
      true

  render: ->
    require './emojify.less'
    emojifiedText = if @supportsEmoji()
      @props.text
    else
      emojiTransform(@props.text || '')
    React.DOM.span(null, emojifiedText)

emojify.less

.emojify {
  width: 1.3em;
  height: 1.3em;
  vertical-align: -0.2em;
}