From 24133efd248584653f955e431c5e9077cd1cce84 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Martin=20Sko=C4=8D=C3=ADk?= <mskocik@gmail.com>
Date: Sat, 13 Nov 2021 16:05:35 +0100
Subject: [PATCH] Update README.md

---
 README.md | 40 ++--------------------------------------
 1 file changed, 2 insertions(+), 38 deletions(-)

diff --git a/README.md b/README.md
index 4e69e91..ba6f99a 100644
--- a/README.md
+++ b/README.md
@@ -126,45 +126,9 @@ highlighting when searching etc.
 
 To make it easier to use your own Components, there are available actions, highlighting function and close button icon for you to use.
 
-Your custom component could use like this:
+The simplest example can be found in this [REPL](https://svelte.dev/repl/627c83c2666f452185baa8947f5588bb?version=3.44.1).
 
-```js
-// MyComponent.svelte
-<script>
-  import { itemActions, highlightSearch, CloseButton } from 'svelecte/item';
-
-  // these properties can be used
-  export let inputValue;
-  export let index = -1;
-  export let item = {};
-  export let isSelected = false;
-  export let isDisabled = false;
-  export let isMultiple = false;
-</script>
-
-<!-- you need to use itemActions and pass given events -->
-<div class="sv-item" use:itemActions={{item, index}}
-  on:select
-  on:deselect
-  on:hover
->
-  <!-- 
-    Here you can define what you want to the user. Default <Item> component has inner div
-    with class .sv-item-content, which provide some basic styling (padding)
-  -->
-
-  <!--
-    if you are implementing controlItem component (for selected items),
-    you can utilize also CloseButton components, which has default behaviour and styling incorporated
-  -->
-  {#if isSelected && isMultiple}
-    <CloseButton/>
-  {/if}
-</div>
-
-<!-- and somewhere in your app -->
-<Svelecte controlItem={MyComponent} dropdownItem={MyComponent} {...otherProps} />
-```
+---
 
 ### Emitted events: