layout

A react component to abstract over flexbox

Dec 12, 2018
A react component to abstract over flexbox

FlexView

A powerful React component to abstract over flexbox and create any layout on any browser.

View demo Download Source

Install

npm i --save 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.

// flex row <FlexView /> // flex column <FlexView column /> // grow, shrink and basis <FlexView grow shrink basis={100} /> <FlexView grow={2} shrink={1} basis='auto' /> <FlexView basis={100} /> // shrink is set to `false` by default so you're certain to a have it `100px` wide/tall // wrap <FlexView 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.

<FlexView hAlignContent='center' vAlignContent='center'> <FlexView>the center of the Earth</FlexView> </FlexView>

How to use

In your component:

import React from 'react'; import FlexView from 'react-flexview'; export default class Component extends React.Component { render() { return ( <FlexView vAlignContent='center'> I'm vertically centered! </FlexView> ); } }

Props

NameTypeDefaultDescription
childrenReactChildrenrequired. FlexView content
columnBooleanoptional. Flex-direction: column
vAlignContentenum("top" | "center" | "bottom")optional. Align content vertically
hAlignContentenum("left" | "center" | "right")optional. Align content horizontally
marginLeftunion(String | Number)optional. Margin-left property ("auto" to align self right)
marginTopunion(String | Number)optional. Margin-top property ("auto" to align self bottom)
marginRightunion(String | Number)optional. Margin-right property ("auto" to align self left)
marginBottomunion(String | Number)optional. Margin-bottom property ("auto" to align self top)
growunion(Boolean | Number)optional. Property (for parent primary axis)
shrinkunion(Boolean | Number)optional. Flex-shrink property
basisunion(String | Number)optional. Flex-basis property
wrapBooleanoptional. Wrap content
heightunion(String | Number)optional. Height property (for parent secondary axis)
widthunion(String | Number)optional. Width property (for parent secondary axis)
classNameStringoptional. Additional className for wrapper element
styleObjectoptional. Inline-style overrides for wrapper element

GitHub

Recommended