direct-slot-children.md

Enforce direct parent-child relationship of slot components (direct-slot-children)

Some Primer React components use a slots pattern under the hood to render subcomponents in specific places. For example, the PageLayout component renders PageLayout.Header in the header area, and PageLayout.Footer in the footer area. These subcomponents must be direct children of the parent component, and cannot be nested inside other components.

Rule details

This rule enforces that slot components are direct children of their parent component.

👎 Examples of incorrect code for this rule:

/* eslint primer-react/direct-slot-children: "error" */
import {PageLayout} from '@primer/react'

const MyHeader = () => <PageLayout.Header>Header</PageLayout.Header>

const App = () => (
  <PageLayout>
    <MyHeader />
  </PageLayout>
)

👍 Examples of correct code for this rule:

/* eslint primer-react/direct-slot-children: "error" */
import {PageLayout} from '@primer/react'

const MyHeader = () => <div>Header</div>

const App = () => (
  <PageLayout>
    <PageLayout.Header>
      <MyHeader />
    </PageLayout.Header>
  </PageLayout>
)

Options

• skipImportCheck (default: false)

  By default, the direct-slot-children rule will only check for direct slot children in components that are imported from @primer/react. You can disable this behavior by setting skipImportCheck to true. This is used for internal linting in the primer/react repository.