Support providing a fallback to unsupported emojis [Fix #157]

README.md

@@ -149,12 +149,29 @@ import { Emoji } from 'emoji-mart'
 | **onClick** | | | Params: `(emoji, event) => {}` |
 | **onLeave** | | | Params: `(emoji, event) => {}` |
 | **onOver** | | | Params: `(emoji, event) => {}` |
+| [**fallback**](#unsupported-emojis-fallback) | | | Params: `(emoji) => {}` |
 | **set** | | `apple` | The emoji set: `'apple', 'google', 'twitter', 'emojione'` |
 | **sheetSize** | | `64` | The emoji [sheet size](#sheet-sizes): `16, 20, 32, 64` |
 | **backgroundImageFn** | | ```((set, sheetSize) => `https://unpkg.com/[email protected]/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) |
 
+#### 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.
+
+To have the component render `:shrug:` you would need to:
+
+```js
+<Emoji
+  set={'messenger'}
+  emoji={'shrug'}
+  size={24}
+  fallback={(emoji) => {
+    return `:${emoji.short_names[0]}:`
+  }}
+/>
+```
+
 ## Custom emojis
 You can provide custom emojis which will show up in their own category.
 

src/components/emoji.js

@@ -102,19 +102,24 @@ const Emoji = props => {
     let setHasEmoji = _getData(props)[`has_img_${props.set}`]
 
     if (!setHasEmoji) {
-      return null
-    }
-
-    style = {
-      width: props.size,
-      height: props.size,
-      display: 'inline-block',
-      backgroundImage: `url(${props.backgroundImageFn(
-        props.set,
-        props.sheetSize
-      )})`,
-      backgroundSize: `${100 * SHEET_COLUMNS}%`,
-      backgroundPosition: _getPosition(props),
+      if (props.fallback) {
+        style = { fontSize: props.size }
+        children = props.fallback(data)
+      } else {
+        return null
+      }
+    } else {
+      style = {
+        width: props.size,
+        height: props.size,
+        display: 'inline-block',
+        backgroundImage: `url(${props.backgroundImageFn(
+          props.set,
+          props.sheetSize
+        )})`,
+        backgroundSize: `${100 * SHEET_COLUMNS}%`,
+        backgroundPosition: _getPosition(props),
+      }
     }
   }
 
@@ -136,6 +141,7 @@ Emoji.propTypes = {
   onOver: PropTypes.func,
   onLeave: PropTypes.func,
   onClick: PropTypes.func,
+  fallback: PropTypes.func,
   backgroundImageFn: PropTypes.func,
   native: PropTypes.bool,
   forceSize: PropTypes.bool,
@@ -166,6 +172,7 @@ Emoji.defaultProps = {
   onOver: () => {},
   onLeave: () => {},
   onClick: () => {},
+  fallback: (emoji) => {},
 }
 
 export default Emoji

stories/index.js

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