ActiveList<T>

COMPONENT

A component which wraps the ActiveList from @uiloos/core.

Since 1.0.0

Signature

ActiveList(

props : ActiveListProps<T>

): JSX.Element

Parameters

props: ActiveListProps<T>

The properties of the ActiveList component.

Returns

A component which wraps the ActiveList from @uiloos/core.

Examples

A. Simple example

The example below creates a list with three items: a, b and c of which only one item can be active. Clicking an item makes it active.

<ActiveList 
  active="a" 
  contents={['a', 'b', 'c']}
>
  {(activeContent) => (
    <ul>
      {activeContent.contents.map((content) => (
        <li 
          key={content.value} 
          onClick={() => content.activate()}
        >
          {content.value} 
          {content.isActive ? 'active' : 'inactive'}
        </li>
      ))}
    </ul>
  )}
</ActiveList>