Handle using custom storage instead of localStorage

README.md

@@ -177,6 +177,30 @@ emojiIndex.search('christmas').map((o) => o.native)
 // => [🎄, 🎅🏼, 🔔, 🎁, ⛄️, ❄️]
 ```
 
+## Storage
+By default EmojiMart will store user chosen skin and frequently used emojis in `localStorage`. That can however be overwritten should you want to store these in your own storage.
+
+```js
+import { store } from 'emoji-mart'
+
+store.setHandlers({
+  getter: (key) => {
+    // Get from your own storage (sync)
+  },
+
+  setter: (key, value) => {
+    // Persist in your own storage (can be async)
+  }
+})
+```
+
+Possible keys are:
+
+| Key | Value | Description |
+| skin | `1, 2, 3, 4, 5, 6` | |
+| frequently | `{ 'astonished': 11, '+1': 22 }` | An object where the key is the emoji name and the value is the usage count |
+| last | 'astonished' | (Optional) Used by `frequently` to be sure the latest clicked emoji will always appear in the “Recent” category |
+
 ## Features
 ### Powerful search
 #### Short name, name and keywords

src/utils/frequently.js

@@ -19,10 +19,16 @@ const DEFAULTS = [
   'poop',
 ]
 
-let frequently = store.get('frequently')
+let frequently, initialized
 let defaults = {}
 
+function init() {
+  initialized = true
+  frequently = store.get('frequently')
+}
+
 function add(emoji) {
+  if (!initialized) init()
   var { id } = emoji
 
   frequently || (frequently = defaults)
@@ -34,6 +40,7 @@ function add(emoji) {
 }
 
 function get(perLine) {
+  if (!initialized) init()
   if (!frequently) {
     defaults = {}
 

src/utils/store.js

@@ -5,6 +5,20 @@ const _JSON = JSON
 var isLocalStorageSupported =
   typeof window !== 'undefined' && 'localStorage' in window
 
+let getter
+let setter
+
+function setHandlers(handlers) {
+  handlers || (handlers = {})
+
+  getter = handlers.getter
+  setter = handlers.setter
+}
+
+function setNamespace(namespace) {
+  NAMESPACE = namespace
+}
+
 function update(state) {
   for (let key in state) {
     let value = state[key]
@@ -13,27 +27,31 @@ function update(state) {
 }
 
 function set(key, value) {
-  if (!isLocalStorageSupported) return
+  if (setter) {
-  try {
+    setter(key, value)
-    window.localStorage[`${NAMESPACE}.${key}`] = _JSON.stringify(value)
+  } else {
-  } catch (e) {}
+    if (!isLocalStorageSupported) return
+    try {
+      window.localStorage[`${NAMESPACE}.${key}`] = _JSON.stringify(value)
+    } catch (e) {}
+  }
 }
 
 function get(key) {
-  if (!isLocalStorageSupported) return
+  if (getter) {
-  try {
+    return getter(key)
-    var value = window.localStorage[`${NAMESPACE}.${key}`]
+  } else {
-  } catch (e) {
+    if (!isLocalStorageSupported) return
-    return
+    try {
-  }
+      var value = window.localStorage[`${NAMESPACE}.${key}`]
+    } catch (e) {
+      return
+    }
 
-  if (value) {
+    if (value) {
-    return JSON.parse(value)
+      return JSON.parse(value)
+    }
   }
 }
 
-function setNamespace(namespace) {
+export default { update, set, get, setNamespace, setHandlers }
-  NAMESPACE = namespace
-}
-
-export default { update, set, get, setNamespace }