# Props and children

Source: https://signy.dev/documentation/1/components/props-and-children/

Attributes in, nodes out.

## Props

Attributes on a component tag arrive in `this.props`. Static props are plain values.

```js
html`<${Greeting} name="Ada" />`;

class Greeting extends Component<{ name: string }> {
  protected render() {
    return html`<p>Hello ${this.props.name}</p>`;
  }
}
```

## Props that change

`render()` runs once, so a value read from props is read once. For a prop that changes, pass a function and call it inside a binding in the child.

```js
const { Component, Signal, application, html } = Signy;

class Meter extends Component {
  render() {
    return html`<meter min="0" max="10" value=${() => this.props.value()}></meter>`;
  }
}

class Panel extends Component {
  level = new Signal(4);

  render() {
    return html`
      <input type="range" min="0" max="10" value="4" aria-label="Level"
        onInput=${(e) => (this.level.value = Number(e.currentTarget.value))} />
      <${Meter} value=${() => this.level.value} />
    `;
  }
}

application(Panel).mount("#props-live");
```

## Children

Content between the tags arrives as `this.props.children`.

```js
const { Component, application, html } = Signy;

class Card extends Component {
  render() {
    return html`
      <article>
        <header><strong>${this.props.title}</strong></header>
        ${this.props.children}
      </article>
    `;
  }
}

class Page extends Component {
  render() {
    return html`
      <${Card} title="Inbox">
        <p>3 unread messages</p>
      </${Card}>
    `;
  }
}

application(Page).mount("#props-children");
```

## Helpers

- `mergeProps(defaults, props)` fills in defaults.
- `splitProps(props, ['a', 'b'])` splits props in two, such as your own and the ones you pass on.