flxbx

A minimalistic flexbox library for React

Why?

Most react libraries for flexbox are bloated. I wrote this for myself as a utility to contain the minimal directives for flexbox to quickly prototype a custom layout with a container containing multiple children each with their own flex specifications.

Features

• minimalistic and light weight
• direct wrapper over flexbox specification see here

Getting Started

Use npm or yarn to add this as dependency

npm install -save flxbx

or

yarn add flxbx

Usage

Flxbx defines two components to describe the flexbox specification for parent container as well as child components.

Consider the layout below:

This can be defined using the following DSL. Read through the values assigned to props to better understand the layout used. Note that Box is just an arbitrary component used to visually represent the effect of flex layout and is not part of the library.

<FlxBx reverse={true} justify='center' align='center'>
	<Box num={1} />
	<Box num={2} />
	<Box num={3} />
	<Box num={4} />
</FlxBx>

To tweak the position of individual child elements, read through the example below

<FlxBx>
	<FlxEl element={Box} num={1} />
	<FlxEl element={Box} num={2} align='center' />
	<FlxEl element={Box} num={3} grow='0.4' />
	<FlxEl element={Box} num={4} align='flex-end'/>
</FlxBx>

FlxEl takes a component as element prop and passes all other props not relevant to flxbx library.

Please check the examples in the storybook for detailed documentation about possible prop values

Documentation

FlxBx

Parent component to define the container level flex properties

| Name | Type | Description (default value) | Flexbox Reference | | --------- | ------- | ---------------------------------------- | ---------------------------------------- | | direction | string | How flex items are placed in the flex container defining the main axis and the direction (row) | flex-direction | | reverse | boolean | Reverse flex direction (false) | - | | justify | string | Defines how the browser distributes space between and around content items along the main axis of their container (flex-start) | justify-content | | align | string | defines how the browser distributes space between and around flex items along the cross-axis of their container (flex-start) | align-items |

FlxEl

Wrapper component for defining flex properties for child elements

| Name | Type | Description (default value) | Flexbox Reference | | ------- | ------ | ---------------------------------------- | ---------------------------------------- | | element | object | Actual component to be rendered as child | - | | align | string | aligns flex items of the current flex line overriding the align-items value (auto) | align-self | | basis | string | specifies the flex basis which is the initial main size of a flex item (auto) | flex-basis | | grow | string | specifies the flex grow factor of a flex item. It specifies what amount of space inside the flex container the item should take up (0) | flex-grow | | shrink | string | specifies the flex shrink factor of a flex item. Flex items will shrink to fill the container according to the flex-shrink number, when the default width of flex items is wider than the flex container (1) | flex-shrink |

License

MIT