diff --git a/README.md b/README.md index 00bf366..acfb629 100644 --- a/README.md +++ b/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 diff --git a/src/utils/frequently.js b/src/utils/frequently.js index 08d4d40..16c9b10 100644 --- a/src/utils/frequently.js +++ b/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 = {} diff --git a/src/utils/store.js b/src/utils/store.js index 86ae9d1..e0bf850 100644 --- a/src/utils/store.js +++ b/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 - try { - window.localStorage[`${NAMESPACE}.${key}`] = _JSON.stringify(value) - } catch (e) {} + if (setter) { + setter(key, value) + } else { + if (!isLocalStorageSupported) return + try { + window.localStorage[`${NAMESPACE}.${key}`] = _JSON.stringify(value) + } catch (e) {} + } } function get(key) { - if (!isLocalStorageSupported) return - try { - var value = window.localStorage[`${NAMESPACE}.${key}`] - } catch (e) { - return - } + if (getter) { + return getter(key) + } else { + if (!isLocalStorageSupported) return + try { + var value = window.localStorage[`${NAMESPACE}.${key}`] + } catch (e) { + return + } - if (value) { - return JSON.parse(value) + if (value) { + return JSON.parse(value) + } } } -function setNamespace(namespace) { - NAMESPACE = namespace -} - -export default { update, set, get, setNamespace } +export default { update, set, get, setNamespace, setHandlers }