Separated

Separated is a component that inserts a specified component between each child element. It is useful for adding separators, spacing, or other repeating elements in lists.

Interface

function Separated(children: React.ReactNode, by: React.ReactNode): JSX.Element;

Parameters

• childrenrequired · React.ReactNode
  

  The child elements to render. Only valid React elements (React.isValidElement) will be rendered.

• byrequired · React.ReactNode
  

  The component to insert between child elements.

Return Value

• JSX.Element
  

  React component that separates children with a specified separator.

Example

function App() {
  return (
    <Separated by={<Border type="padding24" />}>
      {['hello', 'react', 'world'].map(item => (
        <div key={item}>{item}</div>
      ))}
    </Separated>
  );
  // Expected output:
  // <div>hello</div>
  // <Border type="padding24" />
  // <div>react</div>
  // <Border type="padding24" />
  // <div>world</div>
}