Merge pull request #132 from Gargron/feature-pass-down-frequently

Allow passing down a `recent` prop instead of localStorage

README.md

@@ -30,6 +30,7 @@ import { Picker } from 'emoji-mart'
 | **include** | | `[]` | Only load included categories. Accepts [I18n categories keys](#i18n). Order will be respected, except for the `recent` category which will always be the first. |
 | **exclude** | | `[]` | Don't load excluded categories. Accepts [I18n categories keys](#i18n). |
 | **custom** | | `[]` | [Custom emojis](#custom-emojis) |
+| **recent** | | | Pass your own frequently used emojis as array of string IDs |
 | **emojiSize** | | `24` | The emoji width and height |
 | **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`) |
@@ -221,7 +222,7 @@ Apple / Google / Twitter / EmojiOne / Messenger / Facebook
 ## Development
 ```sh
 $ yarn build
-$ yarn start 
+$ yarn start
 $ yarn storybook
 ```
 

src/components/category.js

@@ -93,11 +93,11 @@ export default class Category extends React.Component {
   }
 
   getEmojis() {
-    var { name, emojis, perLine } = this.props
+    var { name, emojis, recent, perLine } = this.props
 
     if (name == 'Recent') {
       let { custom } = this.props
-      let frequentlyUsed = frequently.get(perLine)
+      let frequentlyUsed = recent || frequently.get(perLine)
 
       if (frequentlyUsed.length) {
         emojis = frequentlyUsed.map(id => {
@@ -208,6 +208,7 @@ Category.propTypes = {
   native: PropTypes.bool.isRequired,
   perLine: PropTypes.number.isRequired,
   emojiProps: PropTypes.object.isRequired,
+  recent: PropTypes.arrayOf(PropTypes.string),
 }
 
 Category.defaultProps = {

src/components/picker.js

@@ -220,7 +220,7 @@ export default class Picker extends React.PureComponent {
 
   handleEmojiClick(emoji, e) {
     this.props.onClick(emoji, e)
-    if (!this.hideRecent) frequently.add(emoji)
+    if (!this.hideRecent && !this.props.recent) frequently.add(emoji)
 
     var component = this.categoryRefs['category-1']
     if (component) {
@@ -420,6 +420,7 @@ export default class Picker extends React.PureComponent {
         emojiTooltip,
         include,
         exclude,
+        recent,
         autoFocus,
       } = this.props,
       { skin } = this.state,
@@ -464,6 +465,9 @@ export default class Picker extends React.PureComponent {
                 native={native}
                 hasStickyPosition={this.hasStickyPosition}
                 i18n={this.i18n}
+                recent={
+                  category.name == 'Recent' ? recent : undefined
+                }
                 custom={
                   category.name == 'Recent' ? CUSTOM_CATEGORY.emojis : undefined
                 }
@@ -530,6 +534,7 @@ Picker.propTypes = {
   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({