# styled-listgroup-component

> The bootstrap listgroup component created with styled-components

Latest version **4.0.0** (published 2019-09-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install styled-listgroup-component
pnpm add styled-listgroup-component
yarn add styled-listgroup-component
bun add styled-listgroup-component
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.0.0 |
| Published | 2019-09-13 |
| First published | 2018-03-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 16.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 213 |
| Author | Lukas Aichbauer |
| Maintainers | aichbauer |
| Keywords | components, react, react-component, ui, styled-components, listgroup, bootstrap, presentational, stateless |

## Links

- npm: https://www.npmjs.com/package/styled-listgroup-component
- Repository: https://github.com/aichbauer/styled-bootstrap-components
- Issues: https://github.com/aichbauer/styled-bootstrap-components/issues
- npm.io page: https://npm.io/package/styled-listgroup-component

## Dependencies (2)

- [styled-config](https://npm.io/package/styled-config.md) ^4.0.0
- [styled-base-components](https://npm.io/package/styled-base-components.md) ^4.0.0

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@progress/kendo-vue-listbox](https://npm.io/package/@progress/kendo-vue-listbox.md) — 932 weekly downloads

## Recent versions

- 4.0.0 (latest) — 2019-09-13
- 3.0.1 — 2018-12-26
- 3.0.0 — 2018-12-24
- 1.3.0 — 2018-03-18
- 1.2.0 — 2018-03-15
- 1.1.0 — 2018-03-13
- 1.0.0 — 2018-03-07

## README

# styled-listgroup-component

[![npm](https://img.shields.io/npm/v/styled-listgroup-component.svg?style=flat-square)](https://www.npmjs.com/package/styled-listgroup-component)
[![Travis branch](https://img.shields.io/travis/aichbauer/styled-bootstrap-components/master.svg?style=flat-square)](https://travis-ci.org/aichbauer/styled-bootstrap-components)
[![Codecov branch](https://img.shields.io/codecov/c/github/aichbauer/styled-bootstrap-components/master.svg?style=flat-square)](https://codecov.io/gh/aichbauer/styled-bootstrap-components)
[![storybook](https://img.shields.io/badge/docs%20with-storybook-f1618c.svg?style=flat-square)](https://aichbauer.github.io/styled-bootstrap-components)
[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg?style=flat-square)](https://lernajs.io/)

> The [bootstrap](https://getbootstrap.com) listgroup component made with [styled-components](https://styled-components.com).

This is a modular approach to use [bootstrap](https://getbootstrap.com)
components for quick prototypes, as an entrypoint of your own component
library, or if you need just one bootstrap component for your application.

## Installation

```sh
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](https://aichbauer.github.io/styled-bootstrap-components).

```jsx
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

---
_Source: https://npm.io/package/styled-listgroup-component · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._