# reactrix-flex

> Lightweight Flex Component For React

Latest version **0.0.1** (published 2018-05-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install reactrix-flex
pnpm add reactrix-flex
yarn add reactrix-flex
bun add reactrix-flex
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2018-05-08 |
| First published | 2018-05-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 17.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | alexcasche |
| Maintainers | alexcasche |
| Keywords | react, component, flex, grid, responsive, flexible, lightweight |

## Links

- npm: https://www.npmjs.com/package/reactrix-flex
- Repository: https://github.com/alexcasche/reactrix-flex
- Homepage: https://github.com/alexcasche/reactrix-flex#readme
- Issues: https://github.com/alexcasche/reactrix-flex/issues
- npm.io page: https://npm.io/package/reactrix-flex

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 0.0.1 (latest) — 2018-05-08

## README

Reactrix Flex
===============

Lightweight Flex Component For React

[![NPM](https://img.shields.io/npm/v/reactrix-flex.svg)](https://www.npmjs.com/package/reactrix-flex) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
[![Travis](https://img.shields.io/travis/alexcasche/reactrix-flex.svg)](https://img.shields.io/travis/alexcasche/reactrix-flex)


Install
---------------

```bash
npm install --save reactrix-flex
yarn add reactrix-flex
```

Usage
---------------

```jsx
import React, { Component } from 'react'
import ReactrixFlex from 'reactrix-flex'

class Flex extends Component {
  render () {
    const options = {
      breakPoints: [ 640, 900, 1200 , 1400],
      rowItems: [ 2, 3, 4, 5]
    }
    return (
      <ReactrixFlex {...options}>
        <div>Flex Item</div>
        <div>Flex Item</div>
      </ReactrixFlex>
    )
  }
}
```

Features
---------------
- Only two peer depencies (react/prop-types) ✔️
- Works great on all devices/browsers ✔️
- Easy to use BEM class hooks ✔️

Examples
---------------
- Demo - https://alexcasche.github.io/reactrix-flex/
- Sandbox - https://codesandbox.io/s/jlzno327x9

Props
---------------

| Prop          | Type      | Default              |   Description: Options   |
|---------------|-----------|----------------------|--------------------------|
| `breakPoints` |  _array_  |  `[ 600, 900, 1280]` | Screen width: `number`   |
| `rowItems`    |  _array_  |  `[ 2, 3, 4 ]`       | Item count: `number`     |


Classes
---------------
| Class                  | Description        |
|------------------------|--------------------|
| `.flex`                |  Outer component wrapper |
| `.flex__cotainer`      |  Inner component wrapper  |
| `.flex__item`          |  Item outer wrapper  |
| `.flex__content`       |  Item inner wrapper  |


Development
---------------
Follow these steps to setup a local development environment.  Use yarn or npm - not both.
1. Clone the repo from Github

```bash
git clone https://github.com/alexcasche/react-sidebar
```

2. Setup project & start rollup watch

```bash
npm install && npm start
yarn install && yarn add
```

3. Setup react app & start dev server

```bash
cd example
npm install && npm start
yarn install && yarn start
```

Shoutout
---------------
Interested in publishing your own packages?  Checkout [create-react-library](https://github.com/transitive-bullshit/create-react-library) 🙌


License
---------------
MIT © [alexcasche](https://github.com/alexcasche)

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