For

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

npm
source

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

Edit this page on Github