# flexcontainer-react

> A React component that makes the creation of flexible layouts easier

Latest version **0.1.6** (published 2020-12-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install flexcontainer-react
pnpm add flexcontainer-react
yarn add flexcontainer-react
bun add flexcontainer-react
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.6 |
| Published | 2020-12-15 |
| First published | 2020-12-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 71.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Elia Chiarucci |
| Maintainers | elia.chiarucci |

## Links

- npm: https://www.npmjs.com/package/flexcontainer-react
- Repository: https://github.com/eliachiarucci/flexcontainer-react
- Homepage: https://github.com/eliachiarucci/flexcontainer-react#readme
- Issues: https://github.com/eliachiarucci/flexcontainer-react/issues
- npm.io page: https://npm.io/package/flexcontainer-react

## Dependencies (2)

- [react-jss](https://npm.io/package/react-jss.md) ^10.5.0
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.0

## Recent versions

- 0.1.6 (latest) — 2020-12-15
- 0.1.5 — 2020-12-15
- 0.1.4 — 2020-12-15
- 0.1.3 — 2020-12-07
- 0.1.2 — 2020-12-04
- 0.1.1 — 2020-12-04
- 0.1.0 — 2020-12-04

## README

## React FlexContainer

FlexContainer is a react component to make flexible layouts easier in React.

<br>

### Installation

```
npm install flexcontainer-react
```

or

```
yarn add flexcontainer-react
```

<br>

### Import it like this

```js
import FlexContainer from "flexcontainer-react";
```

<br>

### Usage

You can use a FlexContainer to wrap every kind of element.

```jsx
<FlexContainer type="vertical" alignItems="center" gap={20}>
  <div className="blue">Child 1</div>
  <div className="blue">Child 2</div>
  <div className="blue">Child 3</div>
</FlexContainer>
```

#### Result

![Demo FlexContainer](../assets/examplenormal.png?raw=true)

<br>

Or you can also use it to wrap other FlexContainers

```jsx
<FlexContainer type="vertical" alignItems="center" gap={20}>
  <div className="blue">Child 1</div>
  <div className="blue">Child 2</div>
  <FlexContainer type="horizontal" justifyContent="center" gap={10}>
    <div className="blue">Child 3</div>
    <div className="blue">Child 4</div>
  </FlexContainer>
  <div className="blue">Child 5</div>
</FlexContainer>
```

#### Result

![Demo FlexContainer](../assets/examplenested.png?raw=true)

<br>

### Properties

The component is made with TypeScript, so when you use it in vscode all the properties are automatically shown to you.

![Demo Autocompletion](../assets/justifycontent.png?raw=true)
![Demo Autocompletion](../assets/justifycenter.png?raw=true)

#### This is a list of every settable property

```js
width: number;
height: number;
flex: string;
type: "horizontal" | "vertical"; // Flex direction, either row or column
alignSelf: "auto" | "flex-start" | "flex-end" | "center" | "baseline" | "stretch";
justifyContent: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly";
alignItems: "auto" | "flex-start" | "flex-end" | "center" | "baseline" | "stretch";
wrap: "nowrap" | "wrap" | "wrap-reverse";
minWidth: string;
minHeight: string;
overflow: string; // What to do when content overflows, CSS Overflow property
padding: number;
margin: number;
gap: number; // The space between each children in px
```

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