styled-listgroup-component

The bootstrap listgroup component made with styled-components.

This is a modular approach to use bootstrap components for quick prototypes, as an entrypoint of your own component library, or if you need just one bootstrap component for your application.

Installation

npm install --save styled-listgroup-component
npm install --save styled-components@^4.1.3 react@^16.7.0 # Peer dependencies

Usage

For detailed information take a look at the documentation.

import {
  ListGroup,
  ListGroupItem,
} from 'styled-listgroup-component';

const MyListGroupComponent = (props) => (
  <ListGroup>
    <ListGroupItem active>Cras justo odio</ListGroupItem>
    <ListGroupItem>Dapibus ac facilisis in</ListGroupItem>
    <ListGroupItem>Morbi leo risus</ListGroupItem>
    <ListGroupItem>Porta ac consectetur ac</ListGroupItem>
    <ListGroupItem disabled>Vestibulum at eros</ListGroupItem>
  </ListGroup>
);

Properties

Properties which can be added to the component to change the visual appearance.

• flush only on ListGroup Type: boolean
• primary only on ListGroupItem Type: boolean
• secondary only on ListGroupItem Type: boolean
• success only on ListGroupItem Type: boolean
• danger only on ListGroupItem Type: boolean
• warning only on ListGroupItem Type: boolean
• info only on ListGroupItem Type: boolean
• light only on ListGroupItem Type: boolean
• dark only on ListGroupItem Type: boolean
• action only on ListGroupItem Type: boolean
• active only on ListGroupItem Type: boolean
• disabled only on ListGroupItem Type: boolean

License

MIT © Lukas Aichbauer