@olenbetong/linked-card-list v1.0.7

@olenbetong/spinner

React component for a list of cards (or other elements) connected by a vertical line.

Installation

NPM:

npm i @olenbetong/linked-card-list

import { Card, List, ListItem } from '@olenbetong/linked-card-list';

IIFE and ESM builds are available on unpkg.com. For IIFE, the components are available in the global ReactLinkedCardList variable, while the ESM build assumes React is available in the window object.

<script src="https://unpkg.com/@olenbetong/linked-card-list@latest/dist/iife/linked-card-list.min.js" type="text/javascript"></script>
<script type="text/javascript">
const { Card, List, ListItem } = ReactLinkedCardList;
</script>

<script type="module">
import { Card, List, ListItem } from "https://unpkg.com/@olenbetong/linked-card-list@latest/dist/module/linked-card-list.min.js";
</script>

Usage

List item can be given a label that will be shown to the left of the vertical line.

<List>
  <ListItem label="18.05.2019, 16:30">
    <Card>
      Card content
    </Card>
  </ListItem>
</List>