# react-flexpane

> Basic layout manager based on flexbox

Latest version **1.0.6** (published 2018-12-02) · MIT license · 0 weekly downloads

## Install

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

## 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 | 1.0.6 |
| Published | 2018-12-02 |
| First published | 2018-11-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 42.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Stanislav Doronin |
| Maintainers | mugiseyebrows |
| Keywords | panes, split, layout, maximize, minimize, windows |

## Links

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

## Dependencies (1)

- [classnames](https://npm.io/package/classnames.md) ^2.2.6

## Alternatives

- [@opentelemetry/exporter-zipkin](https://npm.io/package/@opentelemetry/exporter-zipkin.md) — 14.8M weekly downloads
- [pusher-js](https://npm.io/package/pusher-js.md) — 2.0M weekly downloads
- [browserify](https://npm.io/package/browserify.md) — 1.7M weekly downloads
- [sqs-consumer](https://npm.io/package/sqs-consumer.md) — 1.7M weekly downloads
- [@sanity/eventsource](https://npm.io/package/@sanity/eventsource.md) — 930.8K weekly downloads

## Recent versions

- 1.0.6 (latest) — 2018-12-02
- 1.0.5 — 2018-12-02
- 1.0.4 — 2018-12-02
- 1.0.3 — 2018-12-02
- 1.0.2 — 2018-11-26
- 1.0.1 — 2018-11-26
- 1.0.0 — 2018-11-25

## README

# About
Basic layout manager based on flexbox

# Install 

`npm install react-flexpane --save`

# Usage

## Basic

```javascript

import {FlexPane, FlexPaneContainer, FlexPaneBar, FlexPaneButtons, FlexPaneTitle} from 'react-flexpane'
import 'react-flexpane/dist/styles.css'

var App = () => <FlexPaneContainer>
    <FlexPane title="first pane">
        ...
    </FlexPane>
    <FlexPane title="second pane">
        ...
    </FlexPane>
    <FlexPane title="third pane">
        ...
    </FlexPane>
    </FlexPaneContainer>
```

## Adding elements to pane bar

Each pane has `<FlexPaneBar/>` as a first child, if it is not specified, default one is added (which contains `<FlexPaneButtons/>` and `<FlexPaneTitle/>`).
```javascript
<FlexPane> 
    content 
</FlexPane>
```
is the same as 
```javascript
<FlexPane>
    <FlexPaneBar>
        <FlexPaneButtons/>
        <FlexPaneTitle/>
    </FlexPaneBar> 
    content 
</FlexPane>
```
If you need custom elements in bar or you want to hide or rearrange buttons or title for some reason, use latter form.

# Demo
https://codepen.io/mugiseyebrows/pen/JexqZB

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