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