Add `html` props to Emoji component [Ref #79]

README.md

@@ -155,6 +155,7 @@ import { Emoji } from 'emoji-mart'
 | **backgroundImageFn** | | ```((set, sheetSize) => `https://unpkg.com/emoji-datasource@3.0.0/sheet_${set}_${sheetSize}.png`)``` | A Fn that returns that image sheet to use for emojis. Useful for avoiding a request if you have the sheet locally. |
 | **skin** | | `1` | Skin color: `1, 2, 3, 4, 5, 6` |
 | **tooltip** | | `false` | Show emoji short name when hovering (title) |
+| [**html**](#using-with-dangerouslySetInnerHTML) | | `false` | Returns an HTML string to use with `dangerouslySetInnerHTML` |
 
 #### Unsupported emojis fallback
 Certain sets don’t support all emojis (i.e. Messenger & Facebook don’t support `:shrug:`). By default the Emoji component will not render anything so that the emojis’ don’t take space in the picker when not available. When using the standalone Emoji component, you can however render anything you want by providing the `fallback` props.
@@ -172,6 +173,20 @@ To have the component render `:shrug:` you would need to:
 />
 ```
 
+#### Using with `dangerouslySetInnerHTML`
+The Emoji component being a [functional component](https://medium.com/missive-app/45-faster-react-functional-components-now-3509a668e69f), you can call it as you would call any function instead of using JSX. Make sure you pass `html: true` for it to return an HTML string.
+
+```js
+<span dangerouslySetInnerHTML={{
+  __html: Emoji({
+    html: true
+    set: 'apple'
+    emoji: '+1'
+    size: 24
+  })
+}}></span>
+```
+
 ## Custom emojis
 You can provide custom emojis which will show up in their own category.
 

src/components/emoji.js

@@ -53,6 +53,26 @@ const _handleLeave = (e, props) => {
   onLeave(emoji, e)
 }
 
+const _isNumeric = (value) => {
+  return !isNaN(value - parseFloat(value))
+}
+
+const _convertStyleToCSS = (style) => {
+  let div = document.createElement('div')
+
+  for (let key in style) {
+    let value = style[key]
+
+    if (_isNumeric(value)) {
+      value += 'px'
+    }
+
+    div.style[key] = value
+  }
+
+  return div.getAttribute('style')
+}
+
 const Emoji = props => {
   for (let k in Emoji.defaultProps) {
     if (props[k] == undefined && Emoji.defaultProps[k] != undefined) {
@@ -123,18 +143,23 @@ const Emoji = props => {
     }
   }
 
-  return (
-    <span
-      key={props.emoji.id || props.emoji}
-      onClick={e => _handleClick(e, props)}
-      onMouseEnter={e => _handleOver(e, props)}
-      onMouseLeave={e => _handleLeave(e, props)}
-      title={title}
-      className={className}
-    >
-      <span style={style}>{children}</span>
-    </span>
-  )
+  if (props.html) {
+    style = _convertStyleToCSS(style)
+    return `<span style='${style}' ${title ? `title='${title}'` : ''} class='${className}'>${children || ''}</span>`
+  } else {
+    return (
+      <span
+        key={props.emoji.id || props.emoji}
+        onClick={e => _handleClick(e, props)}
+        onMouseEnter={e => _handleOver(e, props)}
+        onMouseLeave={e => _handleLeave(e, props)}
+        title={title}
+        className={className}
+      >
+        <span style={style}>{children}</span>
+      </span>
+    )
+  }
 }
 
 Emoji.propTypes = {

stories/index.js

@@ -50,6 +50,7 @@ storiesOf('Emoji', module)
       emoji={text('Emoji', '+1')}
       size={number('Emoji size', 64)}
       skin={number('Skin tone', 1)}
+      html={boolean('HTML', false)}
       fallback={(emoji) => {
         return `:${emoji.short_names[0]}:`
       }}