Svelte alias/rename props

user_737896 0
Viewed 216

Is there any way to rename/alias props in svelte?

For example, if I have a component which takes a foo prop but I also want a foo local variable for the current state, is there any way to rename the incoming prop a bit like this:

export let foo as forceFoo;
let foo = forceFoo | null;

Normally the correct answer is one of these two:

  1. Rename the prop to something like initialFoo
  2. Rename the state

Renaming the prop is not appropriate in this case - it's the public API of the component and it's not an initial state, it's an optional override that forces the value of that field.

Renaming the state is ok for a single field and usually works well for generic components, but becomes horrible and unwieldy when the component is a form with many fields and has to pass those fields on to a save function that expects them to have the right names.

svelte-component svelte
1 Answers

The proper syntax is the following:

<script>
  // aliased prop
  let forceFoo
  export { forceFoo as foo }

  // local state
  let foo = forceFoo
</script>
user_13875190
Related