This content originally appeared on DEV Community and was authored by Dev Gaurav Jatt
Creating an Interactive Color Picker with Svelte 5
Svelte 5 offers an elegant and efficient way to build interactive web applications, and a color picker is a perfect example to demonstrate its capabilities. In this blog post, we’ll explore how to create an interactive color picker using Svelte 5, focusing on a simple yet functional code snippet.
full code
<script>
import Svg from '../lib/assets/circle.svg';
let colors = $state(['#BBFF00', '#06F586', '#ff3e00', '#8D462E', '#FF0037']);
let fillings = $state(0);
$effect(() => {
console.log(fillings);
});
</script>
<div>
<div class="flex gap-2 mb-4">
{#each colors as color, index}
<div class="flex flex-col gap-2">
<button
onclick={() => (fillings = index)}
style:background={colors[index]}
class="w-24 h-24 mb-3 rounded-full"
>
{#if index === fillings}
<img src={Svg} alt={index.toString()} />
{/if}
</button>
<span>
<code>
{colors[index]}
</code>
</span>
</div>
{/each}
</div>
<input bind:value={colors[fillings]} type="color" name="color" />
</div>
Understanding the Code Structure
The provided code creates a color picker interface where users can select from a set of predefined colors. Here’s how it works:
- SVG Image Import: The component starts by importing an SVG file, which will be displayed next to the selected color. This visual cue enhances the user experience.
import Svg from '../lib/assets/circle.svg';
-
Color Array: An array of colors is defined using
$state, which allows for reactive state management in Svelte.
let colors = $state(['#BBFF00', '#06F586', '#ff3e00', '#8D462E', '#FF0037']);
-
Current Filling State: Another state variable
fillingskeeps track of the currently selected color index.
let fillings = $state(0);
-
Effect Hook: The
$effectfunction logs the current value offillingsto the console, allowing developers to track changes in real-time.
$effect(() => {
console.log(fillings);
});
-
Rendering the UI: The UI is built using a combination of
eachblocks and conditional rendering. For each color in the array, a button is created. When a button is clicked, it updates thefillingsstate to reflect the selected index. The selected color is highlighted with an SVG icon.
{#each colors as color, index}
<button onclick={() => (fillings = index)} style:background={colors[index]} class="w-24 h-24 mb-3 rounded-full">
{#if index === fillings}
<img src={Svg} alt={index.toString()} />
{/if}
</button>
{/each}
- Color Input: A color input element allows users to customize the selected color. It is bound to the currently selected color, ensuring that changes reflect immediately in the UI.
<input bind:value={colors[fillings]} type="color" name="color" />
Enhancing User Experience
With this simple setup, users can easily choose a color, and the real-time feedback enhances engagement. The SVG icon provides a visual representation of the selected color, making the interface more intuitive.
Conclusion
Creating an interactive color picker in Svelte 5 is a straightforward process that showcases the framework's strengths in reactivity and simplicity. This example can serve as a foundation for more complex applications, allowing developers to build on this basic functionality with additional features, such as saving color preferences or integrating with design tools. With Svelte, the possibilities are endless, making it a fantastic choice for modern web development.
This content originally appeared on DEV Community and was authored by Dev Gaurav Jatt
Dev Gaurav Jatt | Sciencx (2024-10-23T02:13:34+00:00) Creating an Interactive Color Picker with Svelte 5. Retrieved from https://www.scien.cx/2024/10/23/creating-an-interactive-color-picker-with-svelte-5/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.