You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Socket
Socket
Sign inDemoInstall

react-flex

Package Overview
Dependencies
Maintainers
3
Versions
27
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-flex


Version published
Maintainers
3
Created

Readme

Source

react-flex

Flex component built for React

Install

$ npm i react-flex --save

Key features

  • support for React 15.2.0
  • no worries about browser prefixing for older browsers
  • props similar to css properties, so basically almost no learning curve

Usage

import { Flex, Item } from 'react-flex';
import '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 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 react-flex/index.css, you get a all the cross-browser syntax and prefixing that autoprefixer offers.

Props

There are two components in the react-flex module: Flex and Item. 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/zippyui/react-flex.git
$ npm i
$ npm run dev

Changelog

New in 2.1.0

  • Make scss variable $REACT-FLEX_MAX-SIZE default to 100 instead of 24

New in 2.0.1

  • Add support for alignSelf

New in 2.0.0

  • Add support for React 15.0.0 in peerDependecies
  • Modify class names - remove all react-flex-item classes & add BEM convention
  • Add display prop to Flex & Item. In this way, you can make even flex Item have display flex or inline-flex
  • Make scss variable $REACT-FLEX_MAX-SIZE take previously defined value if one exists.

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.

License

MIT

FAQs

Package last updated on 13 Feb 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc