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