From 1bb58b927ae669226c99c46b596f4d1e8f23a809 Mon Sep 17 00:00:00 2001
From: Boris Serebrov <serebrov@gmail.com>
Date: Fri, 9 Jun 2023 22:25:22 -0400
Subject: [PATCH] Update readme

---
 README.md | 50 ++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 50 insertions(+)

diff --git a/README.md b/README.md
index fd4d022..a345a04 100644
--- a/README.md
+++ b/README.md
@@ -194,12 +194,62 @@ Note: CSS also includes background images for image-based emoji sets (apple, goo
 | **pickerStyles**   |          |                    | Inline styles applied to the root element. Useful for positioning                                    |
 | **title**          |          | `Emoji Mart™`      | The title shown when no emojis are hovered                                                           |
 | **infiniteScroll** |          | `true`             | Scroll continuously through the categories                                                           |
+| **selectable**     |          | `false`            | Display "Selected" category with emoji passed as 'emoji', see "Selectable picker" section            |
 
 | Event           | Description             |
 | --------------- | ----------------------- |
 | **select**      | Params: `(emoji) => {}` |
 | **skin-change** | Params: `(skin) => {}`  |
 
+#### Selectable picker
+
+Selectable picker added in #253 and allows using `Picker` component as a selector to select and unselect a single emoji.
+
+Here is an example:
+
+```javascript
+<template>
+  <div>
+  <emoji v-if="selectedEmoji" :data="index" :emoji="selectedEmoji" :size="32" />
+  <picker
+    :data="index"
+    :emoji="selectedEmoji"
+    :selectable="true"
+    @select="selectableSelectEmoji"
+    @unselect="selectableUnselectEmoji"
+  />
+  </div>
+</template>
+
+<script>
+import data from 'emoji-mart-vue-fast/data/all.json'
+import 'emoji-mart-vue-fast/css/emoji-mart.css'
+import { Picker, Emoji, EmojiIndex } from 'emoji-mart-vue-fast'
+
+export default {
+  data() {
+    return {
+      index: new EmojiIndex(data),
+      emoji: 'point_up',
+      selectedEmoji: undefined,
+    }
+  },
+  methods: {
+    selectableSelectEmoji(emoji) {
+      this.selectedEmoji = emoji
+    },
+    selectableUnselectEmoji(emoji) {
+      this.selectedEmoji = undefined
+    },
+  },
+  components: {
+    Picker,
+    Emoji,
+  },
+}
+</script>
+```
+
 #### Picker Usage And Native Emoji vs Images
 
 The `select` event described above can be handled to insert the emoji into the text area or use it in any other way.