I want to be able to reuse Chip components made with Svelte - components

Question

It is difficult to reuse the Chip components that are currently running in my project.
I would like to modify the code to make it easier to reuse.
For example, I want to make it as easy to use as this
let labels=["foo", "bar"];
<Chips labels="{labels}" >
Current source code
<script>
import { redirectUris } from '../../store/';
import close from '../../asset/icon/tip/close.svg';
function removeFromList(index) {
$redirectUris.splice(index, 1);
$redirectUris = $redirectUris;
}
</script>
<div class="chips">
{#each $redirectUris as uri, index}
<div class="chip">
<p class="chip-name">{uri}</p>
<button
on:click="{() => {
console.log(uri);
removeFromList(index);
console.log($redirectUris);
}}">
<img src="{close}" alt="close" />
</button>
</div>
{/each}
</div>

Answer 1

Remove the reference to your store and replace it with a property:
<script>
import close from '../../asset/icon/tip/close.svg';
export let labels = [];
</script>
<div class="chips">
{#each labels as label, index}
<div class="chip">
<p class="chip-name">{label}</p>
<button
on:click="{() => {
labels.splice(index, 1);
labels = labels;
}}">
<img src="{close}" alt="close" />
</button>
</div>
{/each}
</div>
You can then use it like you posted above. If you need to update the chips in your parent component, use bind which establishes a two-way binding:
<script>
import Chips from '..';
let labels=["foo", "bar"];
</script>
<Chips bind:labels />
If you need a "chip deleted" event, you can use event dispatchers for that: https://svelte.dev/docs#createEventDispatcher
<script>
import { createEventDispatcher } from 'svelte';
import close from '../../asset/icon/tip/close.svg';
export let labels = [];
const dispatch = createEventDispatcher();
</script>
<div class="chips">
{#each labels as label, index}
<div class="chip">
<p class="chip-name">{label}</p>
<button
on:click="{() => {
labels.splice(index, 1);
labels = labels;
dispatch('close', { label, index });
}}">
<img src="{close}" alt="close" />
</button>
</div>
{/each}
</div>