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

release
Etienne Lemay 2018-01-09 15:14:54 -05:00
parent 3fa0331d60
commit 6d095a072c
3 changed files with 53 additions and 12 deletions

View File

@ -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. | | **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` | | **skin** | | `1` | Skin color: `1, 2, 3, 4, 5, 6` |
| **tooltip** | | `false` | Show emoji short name when hovering (title) | | **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 #### Unsupported emojis fallback
Certain sets dont support all emojis (i.e. Messenger & Facebook dont support `:shrug:`). By default the Emoji component will not render anything so that the emojis dont 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. Certain sets dont support all emojis (i.e. Messenger & Facebook dont support `:shrug:`). By default the Emoji component will not render anything so that the emojis dont 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 ## Custom emojis
You can provide custom emojis which will show up in their own category. You can provide custom emojis which will show up in their own category.

View File

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

View File

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