React Flexy Box

React flexy box is a simple to use flexbox system for your React project based on the original flexybox library

If you've used the bootstrap layout system, then react-flexybox should be relatively familiar.

• Straight forward and familiar API for controlling your layout
• built with styled-components - no css/scss means no need to add special loaders/config
• based off actual uses cases in production apps

Live Demo

https://react-flexybox-demo.netlify.com/

Browser Support

"Chrome >= 48",
"Firefox >= 44",
"Firefox ESR",
"Safari >= 9.1",
"Edge >= 12",
"ios_saf >= 9.3",
"ie 11"

Installation

dependencies: react 15+, styled-components 3+

npm install react-flexybox styled-components

or

yarn add react-flexy-box styled-components

API

<Container />

Optional wrapper

| prop | type | values | default | description | |---------- |:------------------: |-------- |--------- | --------------------------------------------------------------------------------- | | fluid | boolean | | false | true: sets content to 100% of page width | false: sets a max-width for content | | className | string | | | set the className on the Container Element | | style | object | | | set the style on the Container Element | | component | function | string | | div | The component to render the Container as |

<Row>

Row wraps Cols

| prop | type | values | default | description | |---------------- |:-------: |------------------------------------------------------------------------------------ |------------ | ----------- | | gutter | number | | 0 | | columnDivision | integer | | 12 | allows columns divisions to be overidden (i.e. 24 = smaller columns than 12) | minColWidths | number | | | override the minWidth for all Cols within the Row | wrap | string | nowrap \| wrap \| wrap-reverse | wrap | whether flex items should wrap when the window is resized | direction | string | row \| row-reverse \| column \| column-reverse | row | | justifyContent | string | flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly | flex-start | justityContent aligns the items inside a flex container along the x axis | alignContent | string | flex-start \| flex-end \| center \| baseline \| stretch | stretch | alignContent aligns the whole structure according to its value and has no effect when items are in a single line | alignItems | string | flex-start \| flex-end \| center \| space-between \| space-around \| stretch \| baseline | stretch | alignItems aligns the items inside a flex container along the y axis just like justifyContent does along the x axis | className | string | | | set the className on the Row Element | | style | object | | | set the style on the Row Element | | debug | boolean | | false | adds bounding boxes to help debug layout issues | | height | string | | | allows setting the Row height e.g. height="100px" | | component | function | string | | div | The component to render the Row as | | center | boolean | | false | shortcut to center child Col items horizontally and vertically | | fill | boolean | | false | shortcut that sets Row to height: 100% - (overrides 'height') | | padding | string | | 0 | sets padding on Row | | paddingTop | string | | 0 | sets padding-top on Row | | paddingLeft | string | | 0 | sets padding-left on Row | | paddingBottom | string | | 0 | sets padding-bottom Row | | paddingRight | string | | 0 | sets padding-right on Row |

• <Row gutter={4} minColWidth={100}> sets child Col flex items to margin of 4px and all min-widths to 100px within Row
• <Row justifyContext="center"> center justifies child Col flex items horizontally within the Row
• <Row justifyContext="center" alignItems="center" > center justifies child Col flex items horizontally and vertically within the Row

<Col>

Flex Items

| prop | type | values | default | description | |---------- |:------------------: |-------------------------------------------------------------------- |---------------------- |-------------------------------------------- | | order | integer | | 0 | set the order of flex items | | alignSelf | string | auto \| flex-start \| flex-end \| center \| baseline \| stretch | auto | center the alignments for one of the items inside a flexible element | | flex | boolean | number | | false \| 1-12 | sets the default flex size | | xs | number | | 1-12 | 0 - 599px | | sm | number | | 1-12 | 600 - 959px | | md | number | | 1-12 | 960px - 1280px | | lg | number | | 1-12 | 1280px or greater | | className | string | | | set the className on the Col Element | | style | object | | | set the style on the Col Element | | component | function | string | | div | The component to render the Col as |

• <Col flex={6}> sets the default flex size
• <Col flex> sets the item to auto stretch
• <Col flex={6} xs={12}> xs (xs, sm, md, or lg) used togther with flex - you can easily set a default flex size for any size other than the xs breakpoint
• <Col flex={6} order={2}> ... <Col flex={6} order={1}> The last Col will be ordered as first
• values for flex ranges are dependent on columnDivisions

Basic Usage

import { Container, Row, Col } from 'react-flexybox';

UMD Usage

...
<head>
  <link rel="stylesheet" href="https://react-flexybox.netlify.com/react-flexybox.min.js">
</head>
...

// ES6
const {
  Container,
  Row,
  Col,
} = ReactFlexyBox;

//ES Old School
var Container = ReactFlexyBox.Container;
var Row = ReactFlexyBox.Row;
var Col = ReactFlexyBox.Col;

Supported Browsers

react-flexybox is supports on browsers that support flex. It will be up to you to set your autoprefixing appropriatly especially if you use IE 11

Supported Browsers

Contributing

• npm install yarn jest -g
• yarn build-all to generate dist
• yarn build-demo to generate/update demo

Scripts

• yarn build - produces production version of your library under the dist folder
• yarn build-all - produces production & dev version of your library under the dist folder
• yarn dev - produces development version of react-flexybox and runs a watcher
• yarn test - runs the tests
• yarn test:watch - same as above but in a watch mode
• yarn demo:build - builds the demo

Built with react-flexybox

• Galactic Fog's Gestalt Platform

Inspiration

• https://css-tricks.com/snippets/css/a-guide-to-flexbox/
• https://v4-alpha.getbootstrap.com/