Default Props

While a component most often receives its props from a parent component at render time, it can be helpful to define default prop values in case a required or expected prop is not passed. You can set default props on your component instance using the default_props option.

import joystick from '@joystick.js/ui';

const Index = joystick.component({
  default_props: {
    name: 'Example Default Prop',
  },
  render: ({ props }) => {
    return `
      <div>
        <p>This will be set no matter what: ${props.name}</p>
      </div>
    `;
  },
});

export default Index;

When a parent component does not provide a prop expected by the child, Joystick will fall back to using the value from default_props. This helps ensure components are resilient and display predictable behavior without needing constant defensive checks.

API

Definition

default_props: object;

Parameters

<prop> any

A key/value pair representing the name of the prop and its default value. All values defined here will be automatically merged into the component's props if not explicitly provided by a parent component.