Add data property to any components that import data.js, and use that under the hood

src/components/category.js

@@ -3,12 +3,14 @@ import PropTypes from 'prop-types'
 
 import frequently from '../utils/frequently'
 import { getData } from '../utils'
-import { Emoji } from '.'
+import { CategoryPropTypes, CategoryDefaultProps } from '../utils/shared-props'
+import NimbleEmoji from './emoji'
 
-export default class Category extends React.Component {
+export default class NimbleCategory extends React.Component {
   constructor(props) {
     super(props)
 
+    this.data = props.data
     this.setContainerRef = this.setContainerRef.bind(this)
     this.setLabelRef = this.setLabelRef.bind(this)
   }
@@ -109,7 +111,7 @@ export default class Category extends React.Component {
 
             return id
           })
-          .filter((id) => !!getData(id))
+          .filter((id) => !!getData(id, null, null, this.data))
       }
 
       if (emojis.length === 0 && frequentlyUsed.length > 0) {
@@ -184,13 +186,14 @@ export default class Category extends React.Component {
         </div>
 
         {emojis &&
-          emojis.map((emoji) => Emoji({ emoji: emoji, ...emojiProps }))}
+          emojis.map((emoji) => NimbleEmoji({ emoji: emoji, data: this.data, ...emojiProps }))}
 
         {emojis &&
           !emojis.length && (
             <div>
               <div>
-                {Emoji({
+                {NimbleEmoji({
+                  data: this.data,
                   ...emojiProps,
                   size: 38,
                   emoji: 'sleuth_or_spy',
@@ -208,17 +211,5 @@ export default class Category extends React.Component {
   }
 }
 
-Category.propTypes = {
+NimbleCategory.propTypes = { ...CategoryPropTypes, data: PropTypes.object.isRequired }
-  emojis: PropTypes.array,
+NimbleCategory.defaultProps = CategoryDefaultProps
-  hasStickyPosition: PropTypes.bool,
-  name: PropTypes.string.isRequired,
-  native: PropTypes.bool.isRequired,
-  perLine: PropTypes.number.isRequired,
-  emojiProps: PropTypes.object.isRequired,
-  recent: PropTypes.arrayOf(PropTypes.string),
-}
-
-Category.defaultProps = {
-  emojis: [],
-  hasStickyPosition: true,
-}

src/components/emoji.js

@@ -1,11 +1,16 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import data from '../data'
 
 import { getData, getSanitizedData, unifiedToNative } from '../utils'
+import { EmojiPropTypes, EmojiDefaultProps } from '../utils/shared-props'
 
 const SHEET_COLUMNS = 52
 
+const _getData = (props) => {
+  var { emoji, skin, set, data } = props
+  return getData(emoji, skin, set, data)
+}
+
 const _getPosition = (props) => {
   var { sheet_x, sheet_y } = _getData(props),
     multiply = 100 / (SHEET_COLUMNS - 1)
@@ -13,14 +18,9 @@ const _getPosition = (props) => {
   return `${multiply * sheet_x}% ${multiply * sheet_y}%`
 }
 
-const _getData = (props) => {
-  var { emoji, skin, set } = props
-  return getData(emoji, skin, set)
-}
-
 const _getSanitizedData = (props) => {
-  var { emoji, skin, set } = props
+  var { emoji, skin, set, data } = props
-  return getSanitizedData(emoji, skin, set)
+  return getSanitizedData(emoji, skin, set, data)
 }
 
 const _handleClick = (e, props) => {
@@ -73,10 +73,10 @@ const _convertStyleToCSS = (style) => {
   return div.getAttribute('style')
 }
 
-const Emoji = (props) => {
+const NimbleEmoji = (props) => {
-  for (let k in Emoji.defaultProps) {
+  for (let k in NimbleEmoji.defaultProps) {
-    if (props[k] == undefined && Emoji.defaultProps[k] != undefined) {
+    if (props[k] == undefined && NimbleEmoji.defaultProps[k] != undefined) {
-      props[k] = Emoji.defaultProps[k]
+      props[k] = NimbleEmoji.defaultProps[k]
     }
   }
 
@@ -163,41 +163,7 @@ const Emoji = (props) => {
   }
 }
 
-Emoji.propTypes = {
+NimbleEmoji.propTypes = { ...EmojiPropTypes, data: PropTypes.object.isRequired }
-  onOver: PropTypes.func,
+NimbleEmoji.defaultProps = EmojiDefaultProps
-  onLeave: PropTypes.func,
-  onClick: PropTypes.func,
-  fallback: PropTypes.func,
-  backgroundImageFn: PropTypes.func,
-  native: PropTypes.bool,
-  forceSize: PropTypes.bool,
-  tooltip: PropTypes.bool,
-  skin: PropTypes.oneOf([1, 2, 3, 4, 5, 6]),
-  sheetSize: PropTypes.oneOf([16, 20, 32, 64]),
-  set: PropTypes.oneOf([
-    'apple',
-    'google',
-    'twitter',
-    'emojione',
-    'messenger',
-    'facebook',
-  ]),
-  size: PropTypes.number.isRequired,
-  emoji: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
-}
 
-Emoji.defaultProps = {
+export default NimbleEmoji
-  skin: 1,
-  set: 'apple',
-  sheetSize: 64,
-  native: false,
-  forceSize: false,
-  tooltip: false,
-  backgroundImageFn: (set, sheetSize) =>
-    `https://unpkg.com/emoji-datasource-${set}@${EMOJI_DATASOURCE_VERSION}/img/${set}/sheets-256/${sheetSize}.png`,
-  onOver: () => {},
-  onLeave: () => {},
-  onClick: () => {},
-}
-
-export default Emoji

src/components/index.js

@@ -1,7 +1,12 @@
 export { default as Anchors } from './anchors'
-export { default as Category } from './category'
+export { default as Category } from './parent-category'
-export { default as Emoji } from './emoji'
+export { default as Emoji } from './parent-emoji'
-export { default as Picker } from './picker'
+export { default as Picker } from './parent-picker'
-export { default as Preview } from './preview'
+export { default as Preview } from './parent-preview'
-export { default as Search } from './search'
+export { default as Search } from './parent-search'
 export { default as Skins } from './skins'
+export { default as NimbleCategory } from './category'
+export { default as NimbleEmoji } from './emoji'
+export { default as NimblePicker } from './picker'
+export { default as NimblePreview } from './preview'
+export { default as NimbleSearch } from './search'

src/components/parent-category.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import data from '../data'
+import { CategoryPropTypes, CategoryDefaultProps } from '../utils/shared-props'
+import NimbleCategory from './category'
+
+export default class Category extends React.Component {
+  render() {
+    return <NimbleCategory {...this.props} {...this.state}/>
+  }
+}
+
+Category.propTypes = { ...CategoryPropTypes }
+Category.defaultProps = { ...CategoryDefaultProps, data }

src/components/parent-emoji.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import data from '../data'
+import { EmojiPropTypes, EmojiDefaultProps } from '../utils/shared-props'
+import NimbleEmoji from './emoji'
+
+export default class Emoji extends React.PureComponent {
+  render() {
+    return <NimbleEmoji {...this.props} {...this.state}/>
+  }
+}
+
+Emoji.propTypes = EmojiPropTypes
+Emoji.defaultProps = { ...EmojiDefaultProps, data }

src/components/parent-picker.js

@@ -0,0 +1,15 @@
+import '../vendor/raf-polyfill'
+
+import React from 'react'
+import data from '../data'
+import { PickerPropTypes, PickerDefaultProps } from '../utils/shared-props'
+import NimblePicker from './picker'
+
+export default class Picker extends React.PureComponent {
+  render() {
+    return <NimblePicker {...this.props} {...this.state}/>
+  }
+}
+
+Picker.propTypes = PickerPropTypes
+Picker.defaultProps = { ...PickerDefaultProps, data }

src/components/parent-preview.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import data from '../data'
+import { PreviewPropTypes, PreviewDefaultProps } from '../utils/shared-props'
+import NimblePreview from './preview'
+
+export default class Preview extends React.PureComponent {
+  render() {
+    return <NimblePreview {...this.props} {...this.state}/>
+  }
+}
+
+Preview.propTypes = PreviewPropTypes
+Preview.defaultProps = { ...PreviewDefaultProps, data }

src/components/parent-search.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import data from '../data'
+import { SearchPropTypes, SearchDefaultProps } from '../utils/shared-props'
+import NimbleSearch from './search'
+
+export default class Search extends React.PureComponent {
+  render() {
+    return <NimbleSearch {...this.props} {...this.state}/>
+  }
+}
+
+Search.propTypes = SearchPropTypes
+Search.defaultProps = { ...SearchDefaultProps, data }

src/components/picker.js

@@ -2,13 +2,13 @@ import '../vendor/raf-polyfill'
 
 import React from 'react'
 import PropTypes from 'prop-types'
-import data from '../data'
 
 import store from '../utils/store'
 import frequently from '../utils/frequently'
 import { deepMerge, measureScrollbar } from '../utils'
+import { PickerPropTypes, PickerDefaultProps } from '../utils/shared-props'
 
-import { Anchors, Category, Emoji, Preview, Search } from '.'
+import { Anchors, NimbleCategory, NimblePreview, NimbleSearch } from '.'
 
 const I18N = {
   search: 'Search',
@@ -28,7 +28,7 @@ const I18N = {
   },
 }
 
-export default class Picker extends React.PureComponent {
+export default class NimblePicker extends React.PureComponent {
   constructor(props) {
     super(props)
 
@@ -41,6 +41,7 @@ export default class Picker extends React.PureComponent {
       anchor: false,
     }
 
+    this.data = props.data
     this.i18n = deepMerge(I18N, props.i18n)
     this.state = {
       skin: props.skin || store.get('skin') || props.defaultSkin,
@@ -48,7 +49,7 @@ export default class Picker extends React.PureComponent {
     }
 
     this.categories = []
-    let allCategories = [].concat(data.categories)
+    let allCategories = [].concat(this.data.categories)
 
     if (props.custom.length > 0) {
       this.CUSTOM_CATEGORY.emojis = props.custom.map((emoji) => {
@@ -99,7 +100,7 @@ export default class Picker extends React.PureComponent {
         const { emojis } = category
         for (let emojiIndex = 0; emojiIndex < emojis.length; emojiIndex++) {
           const emoji = emojis[emojiIndex]
-          if (props.emojisToShowFilter(data.emojis[emoji] || emoji)) {
+          if (props.emojisToShowFilter(this.data.emojis[emoji] || emoji)) {
             newEmojis.push(emoji)
           }
         }
@@ -474,6 +475,7 @@ export default class Picker extends React.PureComponent {
         <div className="emoji-mart-bar">
           <Anchors
             ref={this.setAnchorsRef}
+            data={this.data}
             i18n={this.i18n}
             color={color}
             categories={this.categories}
@@ -481,9 +483,10 @@ export default class Picker extends React.PureComponent {
           />
         </div>
 
-        <Search
+        <NimbleSearch
           ref={this.setSearchRef}
           onSearch={this.handleSearch}
+          data={this.data}
           i18n={this.i18n}
           emojisToShowFilter={emojisToShowFilter}
           include={include}
@@ -499,7 +502,7 @@ export default class Picker extends React.PureComponent {
         >
           {this.getCategories().map((category, i) => {
             return (
-              <Category
+              <NimbleCategory
                 ref={this.setCategoryRef.bind(this, `category-${i}`)}
                 key={category.name}
                 id={category.id}
@@ -508,6 +511,7 @@ export default class Picker extends React.PureComponent {
                 perLine={perLine}
                 native={native}
                 hasStickyPosition={this.hasStickyPosition}
+                data={this.data}
                 i18n={this.i18n}
                 recent={
                   category.id == this.RECENT_CATEGORY.id ? recent : undefined
@@ -537,8 +541,9 @@ export default class Picker extends React.PureComponent {
 
         {showPreview && (
           <div className="emoji-mart-bar">
-            <Preview
+            <NimblePreview
               ref={this.setPreviewRef}
+              data={this.data}
               title={title}
               emoji={emoji}
               showSkinTones={showSkinTones}
@@ -562,62 +567,5 @@ export default class Picker extends React.PureComponent {
   }
 }
 
-Picker.propTypes = {
+NimblePicker.propTypes = { ...PickerPropTypes, data: PropTypes.object.isRequired }
-  onClick: PropTypes.func,
+NimblePicker.defaultProps = { ...PickerDefaultProps }
-  onSelect: PropTypes.func,
-  onSkinChange: PropTypes.func,
-  perLine: PropTypes.number,
-  emojiSize: PropTypes.number,
-  i18n: PropTypes.object,
-  style: PropTypes.object,
-  title: PropTypes.string,
-  emoji: PropTypes.string,
-  color: PropTypes.string,
-  set: Emoji.propTypes.set,
-  skin: Emoji.propTypes.skin,
-  native: PropTypes.bool,
-  backgroundImageFn: Emoji.propTypes.backgroundImageFn,
-  sheetSize: Emoji.propTypes.sheetSize,
-  emojisToShowFilter: PropTypes.func,
-  showPreview: PropTypes.bool,
-  showSkinTones: PropTypes.bool,
-  emojiTooltip: Emoji.propTypes.tooltip,
-  include: PropTypes.arrayOf(PropTypes.string),
-  exclude: PropTypes.arrayOf(PropTypes.string),
-  recent: PropTypes.arrayOf(PropTypes.string),
-  autoFocus: PropTypes.bool,
-  custom: PropTypes.arrayOf(
-    PropTypes.shape({
-      name: PropTypes.string.isRequired,
-      short_names: PropTypes.arrayOf(PropTypes.string).isRequired,
-      emoticons: PropTypes.arrayOf(PropTypes.string),
-      keywords: PropTypes.arrayOf(PropTypes.string),
-      imageUrl: PropTypes.string.isRequired,
-    }),
-  ),
-}
-
-Picker.defaultProps = {
-  onClick: () => {},
-  onSelect: () => {},
-  onSkinChange: () => {},
-  emojiSize: 24,
-  perLine: 9,
-  i18n: {},
-  style: {},
-  title: 'Emoji Mart™',
-  emoji: 'department_store',
-  color: '#ae65c5',
-  set: Emoji.defaultProps.set,
-  skin: null,
-  defaultSkin: Emoji.defaultProps.skin,
-  native: Emoji.defaultProps.native,
-  sheetSize: Emoji.defaultProps.sheetSize,
-  backgroundImageFn: Emoji.defaultProps.backgroundImageFn,
-  emojisToShowFilter: null,
-  showPreview: true,
-  showSkinTones: true,
-  emojiTooltip: Emoji.defaultProps.tooltip,
-  autoFocus: false,
-  custom: [],
-}

src/components/preview.js

@@ -1,12 +1,15 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { Emoji, Skins } from '.'
+import { PreviewPropTypes, PreviewDefaultProps } from '../utils/shared-props'
+import { NimbleEmoji, Skins } from '.'
 import { getData } from '../utils'
 
-export default class Preview extends React.PureComponent {
+export default class NimblePreview extends React.PureComponent {
   constructor(props) {
     super(props)
+
+    this.data = props.data
     this.state = { emoji: null }
   }
 
@@ -21,7 +24,7 @@ export default class Preview extends React.PureComponent {
       } = this.props
 
     if (emoji) {
-      var emojiData = getData(emoji),
+      var emojiData = getData(emoji, null, null, this.data),
         { emoticons = [] } = emojiData,
         knownEmoticons = [],
         listedEmoticons = []
@@ -38,7 +41,7 @@ export default class Preview extends React.PureComponent {
       return (
         <div className="emoji-mart-preview">
           <div className="emoji-mart-preview-emoji">
-            {Emoji({ key: emoji.id, emoji: emoji, ...emojiProps })}
+            {NimbleEmoji({ key: emoji.id, emoji: emoji, data: this.data, ...emojiProps })}
           </div>
 
           <div className="emoji-mart-preview-data">
@@ -66,7 +69,7 @@ export default class Preview extends React.PureComponent {
           <div className="emoji-mart-preview-emoji">
             {idleEmoji &&
               idleEmoji.length &&
-              Emoji({ emoji: idleEmoji, ...emojiProps })}
+              NimbleEmoji({ emoji: idleEmoji, data: this.data, ...emojiProps })}
           </div>
 
           <div className="emoji-mart-preview-data">
@@ -84,15 +87,5 @@ export default class Preview extends React.PureComponent {
   }
 }
 
-Preview.propTypes = {
+NimblePreview.propTypes = { ...PreviewPropTypes, data: PropTypes.object.isRequired }
-  showSkinTones: PropTypes.bool,
+NimblePreview.defaultProps = PreviewDefaultProps
-  title: PropTypes.string.isRequired,
-  emoji: PropTypes.string.isRequired,
-  emojiProps: PropTypes.object.isRequired,
-  skinsProps: PropTypes.object.isRequired,
-}
-
-Preview.defaultProps = {
-  showSkinTones: true,
-  onChange: () => {},
-}

src/components/search.js

@@ -1,11 +1,14 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import emojiIndex from '../utils/emoji-index'
+import NimbleEmojiIndex from '../utils/emoji-index'
+import { SearchPropTypes, SearchDefaultProps } from '../utils/shared-props'
 
-export default class Search extends React.PureComponent {
+export default class NimbleSearch extends React.PureComponent {
   constructor(props) {
     super(props)
 
+    this.data = props.data
+    this.emojiIndex = new NimbleEmojiIndex(this.data)
     this.setRef = this.setRef.bind(this)
     this.handleChange = this.handleChange.bind(this)
   }
@@ -14,7 +17,7 @@ export default class Search extends React.PureComponent {
     var value = this.input.value
 
     this.props.onSearch(
-      emojiIndex.search(value, {
+      this.emojiIndex.search(value, {
         emojisToShowFilter: this.props.emojisToShowFilter,
         maxResults: this.props.maxResults,
         include: this.props.include,
@@ -49,16 +52,5 @@ export default class Search extends React.PureComponent {
   }
 }
 
-Search.propTypes = {
+NimbleSearch.propTypes = { ...SearchPropTypes, data: PropTypes.object.isRequired }
-  onSearch: PropTypes.func,
+NimbleSearch.defaultProps = SearchDefaultProps
-  maxResults: PropTypes.number,
-  emojisToShowFilter: PropTypes.func,
-  autoFocus: PropTypes.bool,
-}
-
-Search.defaultProps = {
-  onSearch: () => {},
-  maxResults: 75,
-  emojisToShowFilter: null,
-  autoFocus: false,
-}

src/index.js

@@ -1,4 +1,4 @@
-import emojiIndex from './utils/emoji-index'
+import emojiIndex from './utils/parent-emoji-index'
 import store from './utils/store'
 import frequently from './utils/frequently'
 

src/utils/emoji-index.js

@@ -1,33 +1,40 @@
-import data from '../data'
 import { getData, getSanitizedData, intersect } from '.'
 
-var originalPool = {}
+export default class NimbleEmojiIndex {
-var index = {}
+  constructor(data) {
-var emojisList = {}
+    this.data = data || {}
-var emoticonsList = {}
+    this.originalPool = {}
-var customEmojisList = []
+    this.index = {}
+    this.emojis = {}
+    this.emoticons = {}
+    this.customEmojisList = []
 
-for (let emoji in data.emojis) {
+    this.buildIndex()
-  let emojiData = data.emojis[emoji],
+  }
+
+  buildIndex() {
+    for (let emoji in this.data.emojis) {
+      let emojiData = this.data.emojis[emoji],
         { short_names, emoticons } = emojiData,
         id = short_names[0]
 
       if (emoticons) {
         emoticons.forEach((emoticon) => {
-      if (emoticonsList[emoticon]) {
+          if (this.emoticons[emoticon]) {
             return
           }
 
-      emoticonsList[emoticon] = id
+          this.emoticons[emoticon] = id
         })
       }
 
-  emojisList[id] = getSanitizedData(id)
+      this.emojis[id] = getSanitizedData(id, null, null, this.data)
-  originalPool[id] = emojiData
+      this.originalPool[id] = emojiData
+    }
   }
 
-function clearCustomEmojis(pool) {
+  clearCustomEmojis(pool) {
-  customEmojisList.forEach((emoji) => {
+    this.customEmojisList.forEach((emoji) => {
       let emojiId = emoji.id || emoji.short_names[0]
   
       delete pool[emojiId]
@@ -35,38 +42,38 @@ function clearCustomEmojis(pool) {
     })
   }
 
-function addCustomToPool(custom, pool) {
+  addCustomToPool(custom, pool) {
-  if (customEmojisList.length) clearCustomEmojis(pool)
+    if (this.customEmojisList.length) this.clearCustomEmojis(pool)
 
     custom.forEach((emoji) => {
       let emojiId = emoji.id || emoji.short_names[0]
 
       if (emojiId && !pool[emojiId]) {
-      pool[emojiId] = getData(emoji)
+        pool[emojiId] = getData(emoji, null, null, this.data)
-      emojisList[emojiId] = getSanitizedData(emoji)
+        this.emojis[emojiId] = getSanitizedData(emoji, null, null, this.data)
       }
     })
   
-  customEmojisList = custom
+    this.customEmojisList = custom
-  index = {}
+    this.index = {}
   }
 
-function search(
+  search(
     value,
     { emojisToShowFilter, maxResults, include, exclude, custom = [] } = {},
   ) {
-  if (customEmojisList != custom) addCustomToPool(custom, originalPool)
+    if (this.customEmojisList != custom) this.addCustomToPool(custom, this.originalPool)
 
     maxResults || (maxResults = 75)
     include || (include = [])
     exclude || (exclude = [])
 
     var results = null,
-    pool = originalPool
+      pool = this.originalPool
 
     if (value.length) {
       if (value == '-' || value == '-1') {
-      return [emojisList['-1']]
+        return [this.emojis['-1']]
       }
 
       var values = value.toLowerCase().split(/[\s|,|\-|_]+/),
@@ -79,7 +86,7 @@ function search(
       if (include.length || exclude.length) {
         pool = {}
 
-      data.categories.forEach((category) => {
+        this.data.categories.forEach((category) => {
           let isIncluded =
             include && include.length ? include.indexOf(category.id) > -1 : true
           let isExcluded =
@@ -89,7 +96,7 @@ function search(
           }
 
           category.emojis.forEach(
-          (emojiId) => (pool[emojiId] = data.emojis[emojiId]),
+            (emojiId) => (pool[emojiId] = this.data.emojis[emojiId]),
           )
         })
 
@@ -99,7 +106,7 @@ function search(
           let customIsExcluded =
             exclude && exclude.length ? exclude.indexOf('custom') > -1 : false
           if (customIsIncluded && !customIsExcluded) {
-          addCustomToPool(custom, pool)
+            this.addCustomToPool(custom, pool)
           }
         }
       }
@@ -107,7 +114,7 @@ function search(
       allResults = values
         .map((value) => {
           var aPool = pool,
-          aIndex = index,
+            aIndex = this.index,
             length = 0
 
           for (let charIndex = 0; charIndex < value.length; charIndex++) {
@@ -133,7 +140,7 @@ function search(
                   let score = subIndex + 1
                   if (sub == id) score = 0
 
-                aIndex.results.push(emojisList[id])
+                  aIndex.results.push(this.emojis[id])
                   aIndex.pool[id] = emoji
 
                   scores[id] = score
@@ -176,5 +183,5 @@ function search(
 
     return results
   }
+}
 
-export default { search, emojis: emojisList, emoticons: emoticonsList }

src/utils/index.js

@@ -1,5 +1,4 @@
 import buildSearch from './build-search'
-import data from '../data'
 import stringFromCodePoint from '../polyfills/stringFromCodePoint'
 
 const _JSON = JSON
@@ -58,7 +57,7 @@ function getSanitizedData() {
   return sanitize(getData(...arguments))
 }
 
-function getData(emoji, skin, set) {
+function getData(emoji, skin, set, data) {
   var emojiData = {}
 
   if (typeof emoji == 'string') {
@@ -68,7 +67,7 @@ function getData(emoji, skin, set) {
       emoji = matches[1]
 
       if (matches[2]) {
-        skin = parseInt(matches[2])
+        skin = parseInt(matches[2], 10)
       }
     }
 

src/utils/parent-emoji-index.js

@@ -0,0 +1,12 @@
+import data from '../data'
+import NimbleEmojiIndex from './emoji-index'
+
+const emojiIndex = new NimbleEmojiIndex(data)
+const emojis = emojiIndex.emojis
+const emoticons = emojiIndex.emoticons
+
+function search() {
+  return emojiIndex.search(...arguments)
+}
+
+export default { search, emojis, emoticons }

src/utils/shared-props.js

@@ -0,0 +1,153 @@
+import PropTypes from 'prop-types'
+
+const CategoryPropTypes = {
+  emojis: PropTypes.array,
+  hasStickyPosition: PropTypes.bool,
+  name: PropTypes.string.isRequired,
+  native: PropTypes.bool.isRequired,
+  perLine: PropTypes.number.isRequired,
+  emojiProps: PropTypes.object.isRequired,
+  recent: PropTypes.arrayOf(PropTypes.string),
+}
+
+const CategoryDefaultProps = {
+  emojis: [],
+  hasStickyPosition: true,
+}
+
+const EmojiPropTypes = {
+  data: PropTypes.object.isRequired,
+  onOver: PropTypes.func,
+  onLeave: PropTypes.func,
+  onClick: PropTypes.func,
+  fallback: PropTypes.func,
+  backgroundImageFn: PropTypes.func,
+  native: PropTypes.bool,
+  forceSize: PropTypes.bool,
+  tooltip: PropTypes.bool,
+  skin: PropTypes.oneOf([1, 2, 3, 4, 5, 6]),
+  sheetSize: PropTypes.oneOf([16, 20, 32, 64]),
+  set: PropTypes.oneOf([
+    'apple',
+    'google',
+    'twitter',
+    'emojione',
+    'messenger',
+    'facebook',
+  ]),
+  size: PropTypes.number.isRequired,
+  emoji: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
+}
+
+const EmojiDefaultProps = {
+  skin: 1,
+  set: 'apple',
+  sheetSize: 64,
+  native: false,
+  forceSize: false,
+  tooltip: false,
+  backgroundImageFn: (set, sheetSize) =>
+  `https://unpkg.com/emoji-datasource-${set}@${EMOJI_DATASOURCE_VERSION}/img/${set}/sheets-256/${sheetSize}.png`,
+  onOver: () => {},
+  onLeave: () => {},
+  onClick: () => {},
+}
+
+const PickerPropTypes = {
+  onClick: PropTypes.func,
+  onSkinChange: PropTypes.func,
+  perLine: PropTypes.number,
+  emojiSize: PropTypes.number,
+  i18n: PropTypes.object,
+  style: PropTypes.object,
+  title: PropTypes.string,
+  emoji: PropTypes.string,
+  color: PropTypes.string,
+  set: EmojiPropTypes.set,
+  skin: EmojiPropTypes.skin,
+  native: PropTypes.bool,
+  backgroundImageFn: EmojiPropTypes.backgroundImageFn,
+  sheetSize: EmojiPropTypes.sheetSize,
+  emojisToShowFilter: PropTypes.func,
+  showPreview: PropTypes.bool,
+  showSkinTones: PropTypes.bool,
+  emojiTooltip: EmojiPropTypes.tooltip,
+  include: PropTypes.arrayOf(PropTypes.string),
+  exclude: PropTypes.arrayOf(PropTypes.string),
+  recent: PropTypes.arrayOf(PropTypes.string),
+  autoFocus: PropTypes.bool,
+  custom: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string.isRequired,
+      short_names: PropTypes.arrayOf(PropTypes.string).isRequired,
+      emoticons: PropTypes.arrayOf(PropTypes.string),
+      keywords: PropTypes.arrayOf(PropTypes.string),
+      imageUrl: PropTypes.string.isRequired,
+    })
+  ),
+}
+
+const PickerDefaultProps = {
+  onClick: () => {},
+  onSkinChange: () => {},
+  emojiSize: 24,
+  perLine: 9,
+  i18n: {},
+  style: {},
+  title: 'Emoji Mart™',
+  emoji: 'department_store',
+  color: '#ae65c5',
+  set: EmojiDefaultProps.set,
+  skin: null,
+  defaultSkin: EmojiDefaultProps.skin,
+  native: EmojiDefaultProps.native,
+  sheetSize: EmojiDefaultProps.sheetSize,
+  backgroundImageFn: EmojiDefaultProps.backgroundImageFn,
+  emojisToShowFilter: null,
+  showPreview: true,
+  showSkinTones: true,
+  emojiTooltip: EmojiDefaultProps.tooltip,
+  autoFocus: false,
+  custom: [],
+}
+
+const PreviewPropTypes = {
+  showSkinTones: PropTypes.bool,
+  title: PropTypes.string.isRequired,
+  emoji: PropTypes.string.isRequired,
+  emojiProps: PropTypes.object.isRequired,
+  skinsProps: PropTypes.object.isRequired,
+}
+
+const PreviewDefaultProps = {
+  showSkinTones: true,
+  onChange: () => {},
+}
+
+
+const SearchPropTypes = {
+  onSearch: PropTypes.func,
+  maxResults: PropTypes.number,
+  emojisToShowFilter: PropTypes.func,
+  autoFocus: PropTypes.bool,
+}
+
+const SearchDefaultProps = {
+  onSearch: () => {},
+  maxResults: 75,
+  emojisToShowFilter: null,
+  autoFocus: false,
+}
+
+export {
+  CategoryPropTypes,
+  CategoryDefaultProps,
+  EmojiPropTypes,
+  EmojiDefaultProps,
+  PickerPropTypes,
+  PickerDefaultProps,
+  PreviewPropTypes,
+  PreviewDefaultProps,
+  SearchPropTypes,
+  SearchDefaultProps,
+}