Add sheetSize prop to Picker & Emoji [Close #18]

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

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: (() => {}),

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,
 }