# @mariosant/react-flex-list

> Create flex powered lists in react.

Latest version **0.0.3** (published 2019-07-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install @mariosant/react-flex-list
pnpm add @mariosant/react-flex-list
yarn add @mariosant/react-flex-list
bun add @mariosant/react-flex-list
```

## Health

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

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2019-07-15 |
| First published | 2019-07-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Marios Antonoudiou |
| Maintainers | mariosant |

## Links

- npm: https://www.npmjs.com/package/@mariosant/react-flex-list
- Repository: https://github.com/mariosant/react-flex-list
- npm.io page: https://npm.io/package/@mariosant/react-flex-list

## Dependencies (1)

- [rebass](https://npm.io/package/rebass.md) ^3.1.1

## Recent versions

- 0.0.3 (latest) — 2019-07-15
- 0.0.2 — 2019-07-15

## README

# React Flex List

Create flex powered lists in react.

[![ko-fi](https://www.ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/M4M7W45W)

[![NPM version](https://img.shields.io/npm/v/@mariosant/react-flex-list.svg)](https://www.npmjs.com/package/@mariosant/react-flex-list)
[![CircleCI](https://circleci.com/gh/mariosant/react-flex-list/tree/master.svg?style=svg)](https://circleci.com/gh/mariosant/react-flex-list/tree/master)

## Installation

Add `@mariosant/react-flex-list` to your `package.json`.

```bash
$ npm install @mariosant/react-flex-list styled-components react
```

You can now import the module and use it like

```javascript
import List from '@mariosant/react-flex-list';

const items = ['rock', 'metal', 'thrash'];
const renderItem = item => <div key={item}>{item}</div>;

export default () => <List flexDirection="column" items={items} renderItem={renderItem} />;
```

## Usage

The component's purpose is to ease the rendering of avg sized lists. It is based on Rebass' Flex component and it basically inherits all the power the Flex component has.

### Props

The component extends [Rebass' Flex props](https://rebassjs.org/Flex) and adds the following:

```
items: any[]
renderItem: (item: any) => ReactElement
```

## Meta

Marios Antonoudiou – [@marios_ant](https://twitter.com/marios_ant) – mariosant@sent.com

Distributed under the MIT license. [https://github.com/mariosant/react-flex-list](https://github.com/mariosant/react-flex-list)

## Contributing

1. Fork it (<https://github.com/mariosant/react-flex-list/fork>)
2. Create your feature branch (`git checkout -b feature/fooBar`)
3. Commit your changes using a semantic commit message.
4. Push to the branch (`git push origin feature/fooBar`)
5. Create a new Pull Request

---
_Source: https://npm.io/package/@mariosant/react-flex-list · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._