javascript / intermediate
Snippet
Dynamic Property Spreading for Flexible Components
Property spreading allows you to pass all keys of an object as individual props to a child component. This is useful for passing configuration objects or data fetched from an API.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
<script>import UserCard from './UserCard.svelte';const userData = {name: 'Markus',role: 'Developer',status: 'Active'};</script><UserCard {...userData} />
svelte
Breakdown
1
const userData = { ... }
An object containing keys that match the expected 'export let' names in the child component.
2
{...userData}
The spread operator (...) expands the object into separate prop assignments for the component.
3
UserCard
The component receiving the spread props as if they were passed individually like name={userData.name}.