Package Exports

@zippytech/react-flex

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@zippytech/react-flex) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-flex

Flex component built for React

Install

$ npm i @zippytech/react-flex --save

Key features

support for a wide range of React versions
no worries about browser prefixing for older browsers
props similar to css properties, so basically almost no learning curve

Usage

import { Flex, Item } from '@zippytech/react-flex';
import '@zippytech/react-flex/index.css';

<Flex row alignItems="center">
  <div>a first div</div>
  <Item flex={1}>flexes to 1</Item>
</Flex>

DONT FORGET to import @zippytech/react-flex/index.css as well.

Motivation

Ideally, we could write <div style={{flex: 1}} />, but the browser landscape has to catch up with prefixing, latest syntax, etc.

So instead, <Item flex={2} /> adds a className on the rendered item. Since you are also importing @zippytech/react-flex/index.css, you get a all the cross-browser syntax and prefixing that autoprefixer offers.

Props

There are two components in the @zippytech/react-flex module: Flex and Item, exposed as named exports. They both support flex as a prop.

Flex

inline: Boolean - for display: inline-flex.
row: Boolean - for flex-direction: row. Defaults to true
column: Boolean - for flex-direction: column
reverse: Boolean - for reverse direction (eg. flex-direction: column-reverse or row-reverse)
wrap: Boolean - for flex-wrap: wrap. Defaults to true.
flex: Number/String/Boolean - a number/string from 0 to 24 for the flex css property. false for none.
alignItems: String - a value for the align-items css property.
justifyContent: String - a value for the justify-content css property.
alignContent: String - a value for the align-content css property.
display: String - you can customize the display to be 'flex' or 'inline-flex'

The Flex component has the following default props (which Item does not):

row=true
wrap=true
alignItems='center'
display='flex'

Our experience shows those are the most common configs, so we made them the defaults.

Item

any of the above
flex: Number/String/Boolean - a number/string from 0 to 24 for the flex css property. false for none. Defaults to 1.
flexGrow: Number/Boolean/String - a number/string from 0 to 24 for flex-grow. Most of the times, using flex is just enough.
flexShrink: Number/String - a value for the flex-shrink css property. From 0 to 24.
flexBasis: String - a value for the flex-basis css property. Valid values are: 0 (and 'none', which is the same), 'auto', 'content', 'fit-content', 'min-content', 'max-content', 'fit'.

Examples

<Flex alignItems="start"> //or "flex-start"
  <Item flex={2}>
    content here
  </Item>
</Flex>

<Flex column wrap={false}>
  <Flex flex={false}>
    Flex also supports the `flex` prop
  </Flex>
  <Item flex={3} />
  <Item flex={12} />
</Flex>

Development

$ git clone https://github.com/zippytech/react-flex.git
$ npm i
$ npm run dev

Other

If you wish to use index.scss, you can import that directly.

Now navigate to http://localhost:8181/dev.html, modify index.jsx and see the changes happen live in the browser.

JSPM

@zippytech/react-flex