Awesome Open Source
Awesome Open Source

react-flex

Responsive Flex component built for React

NPM JavaScript Style Guide Build Status Coverage Status npm semantic-release 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

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


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,557,240
Reactjs (73,124
Responsive (1,602
Grid (1,303
Flexbox (1,115
Layout (1,005
Flex (484
Related Projects