https://github.com/buildo/react-flexview
A powerful React component to abstract over flexbox and create any layout on any browser
https://github.com/buildo/react-flexview
flex flexbox grid layout react vertical-align
Last synced: 18 days ago
JSON representation
A powerful React component to abstract over flexbox and create any layout on any browser
- Host: GitHub
- URL: https://github.com/buildo/react-flexview
- Owner: buildo
- License: mit
- Created: 2016-05-17T16:25:18.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2024-08-28T00:01:15.000Z (8 months ago)
- Last Synced: 2025-03-24T00:02:49.252Z (about 1 month ago)
- Topics: flex, flexbox, grid, layout, react, vertical-align
- Language: TypeScript
- Homepage: http://react-components.buildo.io/#flexview
- Size: 5.2 MB
- Stars: 279
- Watchers: 6
- Forks: 15
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# FlexView
A powerful React component to abstract over *flexbox* and create any layout on any browser.
## Install
```
yarn add react-flexview
```
## Why
The *flexbox* API is powerful but far from being perfect.
The API is complex and there are still many inconsistencies between browsers that force developers to overuse vendor prefixes and literally do magic tricks to achieve the desired layout.
For these reasons, we asked ourselves: is there a way to simplify the API and handle any browser inconsistency in a single place? Our attempt to answer "yes!" to that question gave birth to `FlexView`.
```jsx
// flex row
// flex column
// grow, shrink and basis
// shrink is set to `false` by default so you're certain to a have it `100px` wide/tall
// wrap
```
Remember how difficult it was to center a `div` inside another `div`?
*flexbox* definitely improved it, but still having to switch from `align-items` to `justify-content` based on `flex-direction` of the parent is confusing and error prone.
`FlexView` lets you align and center `children` with two intuitive props: `vAlignContent` and `hAlignContent`.
```jsx
the center of the Earth
```
## How to use
In your component:
```jsx
import React from 'react';
import FlexView from 'react-flexview';
export default class Component extends React.Component {
render() {
return (
I'm vertically centered!
);
}
}
```
### Props
|Name|Type|Default|Description|
|----|----|-------|-----------|
| **children** | ReactChildren | | **required**. FlexView content |
| **column** | Boolean | | *optional*. Flex-direction: column |
| **vAlignContent** | enum("top" | "center" | "bottom") | | *optional*. Align content vertically |
| **hAlignContent** | enum("left" | "center" | "right") | | *optional*. Align content horizontally |
| **marginLeft** | union(String | Number) | | *optional*. Margin-left property ("auto" to align self right) |
| **marginTop** | union(String | Number) | | *optional*. Margin-top property ("auto" to align self bottom) |
| **marginRight** | union(String | Number) | | *optional*. Margin-right property ("auto" to align self left) |
| **marginBottom** | union(String | Number) | | *optional*. Margin-bottom property ("auto" to align self top) |
| **grow** | union(Boolean | Number) | | *optional*. Property (for parent primary axis) |
| **shrink** | union(Boolean | Number) | | *optional*. Flex-shrink property |
| **basis** | union(String | Number) | | *optional*. Flex-basis property |
| **wrap** | Boolean | | *optional*. Wrap content |
| **height** | union(String | Number) | | *optional*. Height property (for parent secondary axis) |
| **width** | union(String | Number) | | *optional*. Width property (for parent secondary axis) |
| **className** | String | | *optional*. Additional `className` for wrapper element |
| **style** | Object | | *optional*. Inline-style overrides for wrapper element |
## Demo
Here's a [live playground](http://react-components.buildo.io/#flexview)
## Documentation
Refer to the [Book of FlexView](http://buildo.github.io/react-flexview/)
## Supported browsers
We removed vendor prefixes in [#66](https://github.com/buildo/react-flexview/issues/66), since than we only supports browsers that don't require prefixes for *flexbox* CSS properties which are most browsers:
- IE 11
- Edge (any version)
- Google Chrome 29+
- Firefox 28+
- Safari 9+
If you need to support older browsers, try with `FlexView` `3.x`.
## Used By
At [buildo](https://buildo.io/) we've been using `FlexView` in production in every web application we built since [July 2015](https://github.com/buildo/react-components/pull/7) (it was in a different repo back then).
As of today, `FlexView` has replaced the `div` as the brick of our projects and, thanks to it, our developers can finally build without too much trouble complex layouts that work the same on Chrome, Firefox, Safari and **Internet Explorer 11**.
You can see it in action here:
- [buildo.io](https://buildo.io/)
- [LexDo.it](https://www.lexdo.it/)