react-styled-flex

Simple, light, unopionated, CSS standard compliant Flexbox component for react using styled-components

Features

• Small and dependency free, ~3 KB minified or ~1.4 KB minified + gzipped.
• Clean underlying HTML DOM. No prop leakage to DOM.
• Supports flex-gap feature. For non supported browsers, it degrades gracefully by applying appropriate margin properties.
• Supports rendering of any react component or html element.
• Supports unitless values wherever required.

Install

yarn add react-styled-flex
or
npm i react-styled-flex

react-styled-flex requires peer dependencies react and styled-components. You need to add them separately.

API

• react-styled-flex exports two components: FlexBox and FlexItem.
• FlexBox behaves as a container with display: flex rule.
• FlexItem as acts as a child for FlexBox. Though FlexBox can have other components as child as well.
• Only use FlexItem if you need to provide additional styles to child components. See Props section for more details.
• FlexItem can be treated as FlexBox for nested childs by setting box prop as true on FlexItem

Usage

react-styled-flex exports two components: FlexBox and FlexItem. Both renders simple div with passed styles derived from passed props.

import {FlexBox, FlexItem} from "react-styled-flex"

const Layout = () => {
	return <FlexBox center>
    	<FlexItem>Child 1</FlexItem>
        <FlexItem flex={1}>Child 2</FlexItem>
    </FlexBox>
} 

On rendering Layout component,

• One parent div with style display: flex; justify-content: center; align-items: center and two nested divs will be rendered.
  • Second nested child will have style flex: 1;

For rendering elements other than divs, please refer Change underlying element section.

Props

FlexBox

Props	Type	Description
height	integer | string	Applies height
width	integer | string	Applies width
margin	integer | string	Applies margin using CSS margin shorthand specification.
padding	integer | string	Applies padding using CSS padding shorthand specification.
border	integer | string	Applies border using CSS border shorthand specification.
inline	boolean	If true, applies display: inline-flex rule otherwise applies display: flex. Default: false
column	boolean	If true, flex-direction rule is set as column otherwise set as row
reverse	boolean	It works in tandem with column prop to generate flex-direction: {row|column}-reverse. Following table summaries it, column reverse flex−direction false false row false true row-reverse true false column true true column-reverse
wrap	boolean	If true, applies flex-wrap as wrap
wrapReverse	boolean	If true, applies flex-wrap as wrap-reverse
center	boolean	If true, then applies justify-content: center and align-items: center
gap	integer | string	Applies gap using CSS gap shorthand specification if browser supports it.
columnGap	integer | string	Applies CSS column-gap property if browser supports it.
rowGap	integer | string	Applies CSS row-gap property if browser supports it.
justifyContent	string	Applies justify-content rule. Depending on the browser, these justify-content values might be supported.
alignItems	string	Applies align-items rule. Depending on the browser, these align-items values might be supported.
alignContent	string	Applies align-content rule. Depending on the browser, these align-content values might be supported.

FlexItem

Props	Type	Description
flex	integer | string	Applies flex using CSS flex shorthand specification.
grow	integer | string	Applies CSS flex-grow property
shrink	integer | string	Applies CSS flex-shrink property
basis	integer | string	Applies CSS flex-basis property
order	integer | string	Applies CSS order property
alignSelf	string	Applies align-self rule. Depending on the browser, these align-self values might be supported.
box	boolean	If true, then FlexItem also behaves as a FlexBox. So in addition to FlexItem props, all the FlexBox props can also be applied. Default: false

Supports unitless values

• react-styled-flex supports unitless values where units are required. In that case value will be auto suffixed with with px unit.
  
• Only values where unites are required(eg. height, width, margin) will be suffixed.
• CSS rules which don't have units won't be suffixed (eg. order)

Supports flex gap feature

• Browser supports flex gap feature

  • If flex gap feature is supported in browser than gap, columnGap and rowGap props will function as per specification.

• Browser don't support flex gap feature

  • If browser does not supports it, then we intend to provide graceful degradation of flex gap feature by setting margin. This fallback is provided only if, either of gap props is set and wrap prop is not set.
  • If wrap is set then gap wont work in non-supported browser.
  • Rest all props are supported.

Change underlying element

• By default FlexBox and FlexItem renders div in the DOM.

• We can change it to any HTML element or react component using is prop.

• Example:

  import {FlexBox, FlexItem} from "react-styled-flex";
  
  <FlexBox center>
      <FlexItem is={"button"}>Child 1</FlexItem>
      <FlexItem is={"button"}>Child 2</FlexItem>
  </FlexBox>

  Render Child 1 and Child 2 as button

• Similarly any react component can be rendered

• Please don't use as prop, provided by styled-components, to change underlying DOM element. Element would be changed but it will leak props to the DOM.

Resources

• A Complete Guide to Flexbox
• CSS Flexible Box Layout