@unagidev/react-flex NPM

react-flex

Responsive Flex component built for React

NPM

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

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

Installation

npm install --save @unagidev/react-flex

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.

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.