Converting to JSX component

Many times, you'll need to convert your slot recipe into a component to easily reuse it anywhere in your application.

We'll do this in the following steps:

Create Tabs Component

Define the DataTabs component and remove any hard-coded values

const DataTabs = (props: DataTabsProps) => {
  const classes = tabsRecipe();
  return ...
}

Define Props Interface

Create an interface for the component props

interface DataTabsProps {
  data: Array<{
    title: React.ReactNode
    content: React.ReactNode
    value: string
  }>
}

Render Dynamic Tab Content

Extract and map over the data to dynamically render tabs and their content

const { data } = props

<Tabs.List className={classes.list}>
  {data.map((item) => (
    <Tabs.Trigger className={classes.tab} value={item.value}>
      {item.title}
    </Tabs.Trigger>
  ))}
</Tabs.List>

{
  data.map((item) => (
    <Tabs.Content className={classes.content} value={item.value}>
      {item.content}
    </Tabs.Content>
  ))
}

Pass Data to Component

Use the DataTabs component and pass the data array

<DataTabs data={[]} />

Expose Customization Props

Import TabsRootProps from ark-ui/react and extend the interface to allow customization

import { TabsRootProps } from '@ark-ui/react';

interface DataTabsProps extends TabsRootProps { ... }

Handle Additional Props

Separate and spread additional props

const { data, ...rest } = props;

<Tabs.Root className={classes.root} {...rest}>

Support Recipe Variants

Import RecipeVariant from styled-system/css and update the interface

import { RecipeVariant } from '../styled-system/css';

type RecipeProps = RecipeVariant<typeof tabsRecipe>;

interface DataTabsProps extends TabsRootProps, RecipeProps { ... }

Separate Recipe Props

Use splitVariantProps to separate recipe props from other props

const [recipeProps, otherProps] = tabsRecipe.splitVariantProps(props)
const { data, ...rest } = otherProps

const classes = tabsRecipe(recipeProps)

Creating reusable components from slot recipes involves defining interfaces, dynamically rendering content, and handling customization and recipe props efficiently.

Locked Video