:context Directive

Pass multiple reactive fields into a component through object-style context input.

:context assigns an object into a component instance context, reactively. r-context is an alias with the same behavior.

Use it when you want to pass multiple values to a component in one place, including fields that are not declared in props.

:context / r-contextComposition

Pass multiple reactive fields into a component through object-style context input.

Try it live

An object crosses the boundaryLive Regor
CHILD CONTEXT / OBJECT INPUTRegor release

Editing is available.

import { defineComponent, html, ref } from 'regor'

export function createContext(interactive = false) {
  const ReleaseCard = defineComponent(
    html`<article class="directive-card directive-context-card">
      <span class="guide-kicker">CHILD CONTEXT / OBJECT INPUT</span
      ><strong>{{ title || 'Untitled release' }}</strong>
      <p>
        {{ editable ? 'Editing is available.' : 'This release is read-only.' }}
      </p>
    </article>`,
    {
      context: () => ({ title: ref(''), editable: ref(false) }),
    },
  )
  return {
    interactive,
    title: ref('Regor release'),
    editable: ref(true),
    components: { ReleaseCard },
  }
}

export const contextTemplate = html` <div class="guide-demo guide-demo--split">
  <div class="guide-controls">
    <label for="context-title">Parent title</label
    ><input
      id="context-title"
      type="text"
      maxlength="50"
      r-model="title"
      :value="title"
      :disabled="!interactive"
    /><label class="guide-check"
      ><input
        type="checkbox"
        r-model="editable"
        :checked="editable"
        :disabled="!interactive"
      />
      Allow editing</label
    >
  </div>
  <ReleaseCard :context="{ title: title, editable: editable }" />
</div>`
import { createApp, useScope } from 'regor'
import { directiveExamples } from './examples'

const element = document.getElementById('directive-demo')
const name = element?.dataset.example
if (element && name && Object.hasOwn(directiveExamples, name)) {
  const example = directiveExamples[name as keyof typeof directiveExamples]
  createApp<object>(
    useScope<object>(() => example.create(true)),
    { element, template: example.template },
  )
}

Edit the parent title and permissions. Object-style input updates the child context.

What it does

<MyComponent :context="{ title: pageTitle, theme: activeTheme }"></MyComponent>
<MyComponent r-context="{ title: pageTitle, theme: activeTheme }"></MyComponent>

In the component, title and theme become available as component context fields (or update existing ref fields when applicable).
When pageTitle or activeTheme changes, the component values are updated.

When to use :context

Use :context for object-style component input. r-context is equivalent and can be used interchangeably.

Use :prop-name="value" or r-bind:prop-name="value" (same single-prop binding behavior) when the prop is declared in the component props list.

Use object-form attribute binding (r-bind="{...}" or :="{...}") for normal host attribute fallthrough, not for component context assignment.

Example

<UserCard
  :user-id="selectedUserId"
  :context="{ badge: userBadge, canEdit: isAdmin }"
></UserCard>
const UserCard = defineComponent('<section>...</section>', {
  props: ['userId'],
  context: (head) => ({
    userId: head.props.userId,
    badge: head.props.badge,
    canEdit: head.props.canEdit,
  }),
})

In this example:

  • userId comes from declared prop binding (:user-id)
  • badge and canEdit come from :context

Back to the directives

Context input differs from host attributes

Use :context for fields in a component context. Object-form r-bind targets host attributes instead.

Keep exploring Select components dynamically.

Select components dynamically, or return to the directive map.