diff --git a/README.md b/README.md index eaae9bb..c523def 100644 --- a/README.md +++ b/README.md @@ -25,11 +25,34 @@ import { Picker } from 'emoji-mart' | **onClick** | | | Params: `(emoji, event) => {}` | | **perLine** | | `9` | Number of emojis per line. While there’s no minimum or maximum, this will affect the picker’s width. This will set *Frequently Used* length as well (`perLine * 4`) | | **set** | | `apple` | The emoji set: `'apple', 'google', 'twitter', 'emojione'` | +| **sheetSize** | | `64` | The emoji [sheet size](#sheet-sizes): `16, 20, 32, 64` | | **skin** | | `1` | Default skin color: `1, 2, 3, 4, 5, 6` | | **style** | | | Inline styles applied to the root element. Useful for positioning | | **title** | | `Emoji Mart™` | The title shown when no emojis are hovered | -Examples of `emoji` object: +#### Sheet sizes +Sheets are served from [unpkg](https://unpkg.com), a global CDN that serves files published to [npm](https://www.npmjs.com). + +| Set | sheetSize | Size | +| -------- | --------- | -------- | +| apple | 16 | 938.7 kB | +| apple | 20 | 1.3 MB | +| apple | 32 | 2.6 MB | +| apple | 64 | 7.2 MB | +| emojione | 16 | 805.5 kB | +| emojione | 20 | 1.1 MB | +| emojione | 32 | 2.0 MB | +| emojione | 64 | 2.7 MB | +| google | 16 | 622.6 kB | +| google | 20 | 849.8 kB | +| google | 32 | 1.6 MB | +| google | 64 | 3.6 MB | +| twitter | 16 | 776.0 kB | +| twitter | 20 | 1.0 MB | +| twitter | 32 | 1.9 MB | +| twitter | 64 | 4.2 MB | + +#### Examples of `emoji` object: ```js { id: 'smiley', @@ -69,6 +92,7 @@ import { Emoji } from 'emoji-mart' | **onLeave** | | | Params: `(emoji, event) => {}` | | **onOver** | | | Params: `(emoji, event) => {}` | | **set** | | `apple` | The emoji set: `'apple', 'google', 'twitter', 'emojione'` | +| **sheetSize** | | `64` | The emoji [sheet size](#sheet-sizes): `16, 20, 32, 64` | | **skin** | | `1` | Skin color: `1, 2, 3, 4, 5, 6` | ## Headless search diff --git a/src/components/emoji.js b/src/components/emoji.js index cccef3f..17cd946 100644 --- a/src/components/emoji.js +++ b/src/components/emoji.js @@ -59,7 +59,7 @@ export default class Emoji extends React.Component { } render() { - var { set, size, onOver, onLeave } = this.props, + var { set, size, sheetSize, onOver, onLeave } = this.props, { unified } = this.getData() if (!unified) { @@ -75,7 +75,7 @@ export default class Emoji extends React.Component { width: size, height: size, display: 'inline-block', - backgroundImage: `url(https://unpkg.com/emoji-datasource@2.4.4/sheet_${set}_64.png)`, + backgroundImage: `url(https://unpkg.com/emoji-datasource@2.4.4/sheet_${set}_${sheetSize}.png)`, backgroundSize: `${100 * SHEET_COLUMNS}%`, backgroundPosition: this.getPosition(), }}> @@ -89,6 +89,7 @@ Emoji.propTypes = { onLeave: React.PropTypes.func, onClick: React.PropTypes.func, skin: React.PropTypes.oneOf([1, 2, 3, 4, 5, 6]), + sheetSize: React.PropTypes.oneOf([16, 20, 32, 64]), set: React.PropTypes.oneOf(['apple', 'google', 'twitter', 'emojione']), size: React.PropTypes.number.isRequired, emoji: React.PropTypes.oneOfType([ @@ -100,6 +101,7 @@ Emoji.propTypes = { Emoji.defaultProps = { skin: 1, set: 'apple', + sheetSize: 64, onOver: (() => {}), onLeave: (() => {}), onClick: (() => {}), diff --git a/src/components/picker.js b/src/components/picker.js index 19e4347..30bb835 100644 --- a/src/components/picker.js +++ b/src/components/picker.js @@ -220,7 +220,7 @@ export default class Picker extends React.Component { } render() { - var { perLine, emojiSize, set, style, title, emoji, color } = this.props, + var { perLine, emojiSize, set, sheetSize, style, title, emoji, color } = this.props, { skin } = this.state, width = (perLine * (emojiSize + 12)) + 12 + 2 @@ -252,6 +252,7 @@ export default class Picker extends React.Component { skin: skin, size: emojiSize, set: set, + sheetSize: sheetSize, onOver: this.handleEmojiOver.bind(this), onLeave: this.handleEmojiLeave.bind(this), onClick: this.handleEmojiClick.bind(this), @@ -269,6 +270,7 @@ export default class Picker extends React.Component { size: 38, skin: skin, set: set, + sheetSize: sheetSize, }} skinsProps={{ skin: skin, @@ -290,6 +292,7 @@ Picker.propTypes = { color: React.PropTypes.string, set: Emoji.propTypes.set, skin: Emoji.propTypes.skin, + sheetSize: Emoji.propTypes.sheetSize, } Picker.defaultProps = { @@ -302,4 +305,5 @@ Picker.defaultProps = { color: '#ae65c5', set: Emoji.defaultProps.set, skin: Emoji.defaultProps.skin, + sheetSize: Emoji.defaultProps.sheetSize, }