docs update

mskocik · Nov 14, 2021 · 1a46afa · 1a46afa
1 parent 57ab1a1
commit 1a46afa
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -121,8 +121,8 @@ validatorAction   | array            | `null`     | Bind validator action for in
 
 ### Custom items
 
-If `renderer` property is not enough for you or you prefer Component syntax to HTML strings, you can use your own Components. Keep in mind that default `Item` component handles styling,
-highlighting when searching etc.
+If `renderer` property is not enough for you or you prefer Component syntax to HTML strings, you can use your own Components. Keep in mind that default `Item` component handles highlighting when searching, but the rest of features 
+like styling should be inherited if you use proper css classes (the same as `Item` component)..
 
 To make it easier to use your own Components, there are available actions, highlighting function and close button icon for you to use.
 

diff --git a/docs/index.html b/docs/index.html
@@ -122,7 +122,7 @@ <h4 class="ml-2 mb-0"><b>S</b><span class="velecte">velecte</span></h4>
               <li class="mt-0">SSR support</li>
               <li class="mt-0">lazy dropdown rendering</li>
               <li class="mt-0">stylable</li>
-              <li class="mt-0">reordable multi selection  with addition of <code>svelte-dnd-action</code>. See <a href="https://svelte.dev/repl/da2de4b9ed13465d892b678eba07ed99?version=3.44.0" target="_blank">example</a>.</li>
+              <li class="mt-0">reordable multi selection  with addition of <code>svelte-dnd-action</code>. See <a href="https://svelte.dev/repl/da2de4b9ed13465d892b678eba07ed99?version=3.44.0" target="repl">example</a>.</li>
             </ul>
 
             <h3 id="intro">Getting started</h3>
@@ -298,6 +298,20 @@ <h4>&bull; Custom item rendering &bull;</h4>
                   </dl>
                 </div>
               </details>
+
+              <p class="mt-2">
+                If <code>renderer</code> property is not enough for you or you prefer Component syntax to HTML strings,
+                you can use your own Components. Keep in mind that default highlighting when searching, but the rest of features 
+                like styling should be inherited if you use proper css classes (the same as <code>Item</code> component).
+              </p>
+              <p class="mt-2">
+                To make it easier to use your own Components, there are available actions, highlighting function and 
+                close button icon for you to use.
+              </p>
+              <p class="mt-2">
+                The simplest example can be found in this 
+                <a href="https://svelte.dev/repl/627c83c2666f452185baa8947f5588bb?version=3.44.1" target="repl">REPL</a>.
+              </p>
             </div>
             <div class="column col-lg-12 col-xl-6 col-6">
               <details>
@@ -871,12 +885,12 @@ <h4 id="options">Options</h4>
                 <td>dndzone</td>
                 <td>function</td>
                 <td><code>empty function</code></td>
-                <td>If you pass <code>dndzone</code> from <code>svelte-dnd-action</code>, reordering of selected items will be possible. See <a href="https://svelte.dev/repl/da2de4b9ed13465d892b678eba07ed99?version=3.44.0">example REPL</a> how to set it up.</td>
+                <td>If you pass <code>dndzone</code> from <code>svelte-dnd-action</code>, reordering of selected items will be possible. See <a href="https://svelte.dev/repl/da2de4b9ed13465d892b678eba07ed99?version=3.44.0" target="repl">example REPL</a> how to set it up.</td>
               </tr><tr>
                 <td>validatorAction</td>
                 <td>array</td>
                 <td><code>null</code></td>
-                <td>Designed to be used with <code>svelte-use-form</code>. Pass <code>validators</code> function as a <b>first</b> item, and validators as the rest. See <a href="https://svelte.dev/repl/de3cd8e47feb4d078b6bace8d4cf7b90?version=3.44.1">example REPL</a>.</td>
+                <td>Designed to be used with <code>svelte-use-form</code>. Pass <code>validators</code> function as a <b>first</b> item, and validators as the rest. See <a href="https://svelte.dev/repl/de3cd8e47feb4d078b6bace8d4cf7b90?version=3.44.1" target="repl">example REPL</a>.</td>
               </tr>
             </tbody>
             <tbody>