Using Props with Svelte

With our current setup, if we fail to pass in a prop, Svelte will complain with a warning in the console:

<script>
  import Card from "./Card.svelte";
</script>

<Card
  title="See you later, Alligator"
  description="Not so soon, baboon!" />

With this, the warning will be: <Card> was created without expected prop 'imageUrl'.

To fix that, we can provide a default value for any prop declared, using something like this:

<script>
  export let title;
  export let description = "Description coming soon!";
  export let imageUrl = "https://picsum.photos/64";
</script>

<style>
  /* ... */
</style>

<section>
  <h1>
    <img src={imageUrl} alt="Avatar for {title}" />
     {title}
  </h1>

  <p>{description}</p>
</section>

And now you can use the Card component without passing-in a description or imageUrl and the component will revert to the default values:

<script>
  import Card from "./Card.svelte";
</script>

<Card
  title="Tood-a-loo, Kangaroo!" />

Similar to how you can spread props in JSX, Svelte allows you to spread props from an object in your code, to avoid the extra typing.

Here’s an example where spreading props is compared against typing in the props in the long form:

<script>
  import Card from "./Card.svelte";

  const items = [
    {
      id: 1
      title: "Pirate",
      description: "Argg!!",
      imageUrl: "https://alligator.io/images/pirate.svg"
    },
    {
      id: 2
      title: "Chef",
      description: "À la soupe!",
      imageUrl: "https://alligator.io/images/chef.svg"
    }
  ];
</script>

<!-- Without spread: -->
{#each items as item}
  <Card
    title={item.title}
    description={item.description}
    imageUrl={item.imageUrl}
  />
{/each}

<!-- With spread: -->
{#each items as item}
  <Card {...item} />
{/each}

Note how it doesn’t matter that when we spread the props from our objects in items an extra property (id) is also passed-in. The Card component doesn’t declare it’s use of id as a prop, so it’s just ignored.