For

Render a list of components or a fallback. Inspired by SolidJS.

import { For } from '@cerberus/react'

Usage

The For component is used to render a list of components or a fallback. It is an abstraction of the Array.map method.

import { For, Text } from '@cerberus/react'
import { VStack } from 'styled-system/jsx'

function ForPreview() {
  const data = ['Cerberus', 'Design', 'System', 'Roolz', 'D00dz']

  return (
    <VStack alignItems="flex-start" gap="md">
      <For each={data}>
        {(item, index) => (
          <Text key={item} textStyle="body-lg">
            {index}. {item}
          </Text>
        )}
      </For>
    </VStack>
  )
}

API

export interface ForProps {
  each: any[]
  fallback?: ReactNode
}

define function For(props: ForProps): ReactNode | null

Props

The For component accepts the following props:

Name	Default	Description
each		An Array of items to loop through.
fallback	null	The content to render when the each value is empty.

On this page