diff --git a/README.md b/README.md index 16b5f27..64dae25 100644 --- a/README.md +++ b/README.md @@ -160,7 +160,7 @@ import { Emoji } from 'emoji-mart' | **onClick** | | | Params: `(emoji, event) => {}` | | **onLeave** | | | Params: `(emoji, event) => {}` | | **onOver** | | | Params: `(emoji, event) => {}` | -| [**fallback**](#unsupported-emojis-fallback) | | | Params: `(emoji) => {}` | +| [**fallback**](#unsupported-emojis-fallback) | | | Params: `(emoji, props) => {}` | | **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. | @@ -178,8 +178,8 @@ To have the component render `:shrug:` you would need to: set={'messenger'} emoji={'shrug'} size={24} - fallback={(emoji) => { - return `:${emoji.short_names[0]}:` + fallback={(emoji, props) => { + return emoji ? `:${emoji.short_names[0]}:` : props.emoji }} /> ``` diff --git a/src/components/emoji/nimble-emoji.js b/src/components/emoji/nimble-emoji.js index 2cc2652..135e735 100644 --- a/src/components/emoji/nimble-emoji.js +++ b/src/components/emoji/nimble-emoji.js @@ -87,7 +87,11 @@ const NimbleEmoji = (props) => { let data = _getData(props) if (!data) { - return null + if (props.fallback) { + return props.fallback(null, props) + } else { + return null + } } let { unified, custom, short_names, imageUrl } = data, @@ -97,7 +101,11 @@ const NimbleEmoji = (props) => { title = null if (!unified && !custom) { - return null + if (props.fallback) { + return props.fallback(data, props) + } else { + return null + } } if (props.tooltip) { @@ -129,7 +137,7 @@ const NimbleEmoji = (props) => { if (!setHasEmoji) { if (props.fallback) { - return props.fallback(data) + return props.fallback(data, props) } else { return null } diff --git a/stories/index.js b/stories/index.js index d51a10a..d639b61 100644 --- a/stories/index.js +++ b/stories/index.js @@ -67,8 +67,8 @@ storiesOf('Emoji', module) size={number('Emoji size', 64)} skin={number('Skin tone', 1)} html={boolean('HTML', false)} - fallback={(emoji) => { - return `:${emoji.short_names[0]}:` + fallback={(emoji, props) => { + return emoji ? `:${emoji.short_names[0]}:` : props.emoji }} /> ));