diff --git a/README.md b/README.md index 82afd2d..dae87b9 100644 --- a/README.md +++ b/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/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) | +#### 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 + { + return `:${emoji.short_names[0]}:` + }} +/> +``` + ## Custom emojis You can provide custom emojis which will show up in their own category. diff --git a/src/components/emoji.js b/src/components/emoji.js index efe091d..6e950a1 100644 --- a/src/components/emoji.js +++ b/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 diff --git a/stories/index.js b/stories/index.js index ee3bf2c..50c0ff9 100644 --- a/stories/index.js +++ b/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]}:` + }} /> ));