react-flex

Responsive Flex component built for React

react-flex is a Responsive Flex component built for React.

https://unagidev.github.io/react-flex/demo/

Installation

npm install --save @unagidev/react-flex

or

yarn add @unagidev/react-flex

Usage

import React, { Component } from 'react'

import Flex from '@unagidev/react-flex'

class Example extends Component {
  render () {
    return (
        <Flex align='center'>
            <Flex>I'm vertically and horizontally centered!</Flex>
        </Flex>
    )
  }
}

// flex row
<Flex>
    ...
</Flex>

// flex column
<Flex direction="column">
    ...
</Flex>

Flex Props

Name	Type	Default	Description
children	ReactChildren		required. Flex content.
inline	Boolean	'flex'	optional. Sets the flex container position.
direction	'row' | 'column'	'row'	optional. Sets the flex container direction.
justifyContent	JustifyContent	'start'	optional. Defines the alignment along the main axis.
alignItems	AlignItems	'stretch'	optional. Defines the alignment along the cross axis.
alignSelf	AlignItems	'auto'	optional. Allows the default alignment (or the one specified by alignItems) to be overridden.
alignContent	AlignItems	'stretch'	optional. Aligns a flex container's lines within when there is extra space in the cross-axis.
wrap	Boolean	false	optional. Allow the items of a flex container to wrap as needed.
grow	Number	0	optional. Sets the ability for a flex item to grow if necessary.
shrink	Number	0	optional. Sets the ability for a flex item to shrink if necessary.
basis	String | Number	'auto'	optional. Sets the default size of an element before the remaining space is distributed.

Non Flex Props

Name	Type	Description
gap	number	optional. Sets margin gaps on children within a flex container.
layoutGap	number	optional. Used internally to inform children of a flex container that a gap property is applied to their parent.
fill	Boolean	optional. Fill the available space. Is a shortcut of grow=1 srink=1 basis=100%
align	union(JustifyContent, AlignItems) | [justifyContent, alignItems]	optional. Sets the distribution of space around items of a flex container. Is a shortcut to use both justifyContent and alignItems in the same property.
size	union(Height, Width) | [Height, Width]	optional. Sets the size (width, height) of the wrapper element
minSize	union(Height, Width) | [Height, Width]	optional. Sets the minimum size (width, height) of the wrapper element
maxSize	union(Height, Width) | [Height, Width]	optional. Sets the maximum size (width, height) of the wrapper element
spacing	union(OuterSpace, InnerSpace) | [OuterSpace, InnerSpace]	optional. Sets the inner (padding) and outer (margin) space of the wrapper element.
show	Boolean	optional. Default: true. Sets the visibility for wrapper element
hide	Boolean	optional. Default: null. Sets the visibility for wrapper element
className	String	optional. Additional className for wrapper element
style	Object	optional. Inline-style overrides for wrapper element

Custom Types

Name	Type	Description
JustifyContent	enum('start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly')	Defines the alignment along the main axis.
AlignItems	enum('start' | 'center' | 'end' | 'stretch' | 'baseline')	Defines the default behavior for how flex items are laid out along the cross axis on the current line.
OuterSpace	string | number | [VerticalSpace, HorizontalSpace] | [Top, Right, Bottom, Left]	Sets the outer space. Same behavior as margin css property.
InnerSpace	string | number | [VerticalSpace, HorizontalSpace] | [Top, Right, Bottom, Left]	Sets the inner space. Same behavior as padding css property.
VerticalSpace	string | number	Sets the vertical space margin-top, margin-bottom if the property is OuterSpace or padding-top, padding-bottom otherwise.
HorizontalSpace	string | number	Sets the horizontal space margin-left, margin-right if the property is OuterSpace or padding-left, padding-right otherwise.
Top	string | number	Sets the top space margin-top if the property is OuterSpace or padding-top if is InnerSpace
Right	string | number	Sets the top space margin-right if the property is OuterSpace or padding-right if is InnerSpace
Bottom	string | number	Sets the top space margin-bottom if the property is OuterSpace or padding-bottom if is InnerSpace
Left	string | number	Sets the top space margin-left if the property is OuterSpace or padding-left if is InnerSpace
Height	string | number	Sets the height for wrapper element
Width	string | number	Sets the width for wrapper element

Responsive

Every property accepts a breakpoint object in this format: { [key: Breakpoint]: property } where Breakpoint is one of the following:

Breakpoints

key	Screen size	Css Definition
'xs'	Default	@media screen and (min-width : 0)
'es'	Extra Small	@media screen and (max-width : 575px)
'gtEs'	Greater than Extra Small	@media screen and (min-width : 576px)
'sm'	Small	@media screen and (min-width : 576px) and (max-width : 767px)
'gtSm'	Greater than Small	@media screen and (min-width : 768px)
'md'	Medium	@media screen and (min-width : 768px) and (max-width : 991px)
'gtMd'	Greater than Medium	@media screen and (min-width : 992px)
'lg'	Large	@media screen and (min-width : 992px) and (max-width : 1199px)
'xl'	Extra Large	@media screen and (min-width : 1200px)

Example:

<Flex direction={{xs:'row', sm:'column'}}>
    // Flex items will be displayed in column on small screens and row otherwise
</Flex>

Contribution

Git Commit Guidelines

We have very precise rules over how our git commit messages can be formatted. This leads to more readable messages that are easy to follow when looking through the project history.

Commit Message Format

Each commit message consists of a header, a body and a footer. The header has a special format that includes a type, a scope and a subject:

<type>(<scope>): <subject>
<BLANK LINE>
<body>
<BLANK LINE>
<footer>

The header is mandatory and the scope of the header is optional.

Any line of the commit message cannot be longer 100 characters! This allows the message to be easier to read on GitHub as well as in various git tools.

Revert

If the commit reverts a previous commit, it should begin with revert: , followed by the header of the reverted commit. In the body it should say: This reverts commit <hash>., where the hash is the SHA of the commit being reverted.

Type

Must be one of the following:

• feat: A new feature
• fix: A bug fix
• docs: Documentation only changes
• style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
• refactor: A code change that neither fixes a bug nor adds a feature
• perf: A code change that improves performance
• test: Adding missing or correcting existing tests
• chore: Changes to the build process or auxiliary tools and libraries such as documentation generation

Scope

The scope could be anything specifying place of the commit change. For example <Flex/>, properties, demo, etc...

You can use * when the change affects more than a single scope.

Subject

The subject contains succinct description of the change:

• use the imperative, present tense: "change" not "changed" nor "changes"
• don't capitalize first letter
• no dot (.) at the end

Body

Just as in the subject, use the imperative, present tense: "change" not "changed" nor "changes". The body should include the motivation for the change and contrast this with previous behavior.

Footer

The footer should contain any information about Breaking Changes and is also the place to [reference GitHub issues that this commit closes][closing-issues].

Breaking Changes should start with the word BREAKING CHANGE: with a space or two newlines. The rest of the commit message is then used for this.

If you use jet brains you can use git-commit-template plugin, or you can use commitizen, a command-line tool to make it easier to use the template.

License

MIT