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

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

The automated release is failing 🚨

🚨 The automated release from the `master` branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

The push permission to the Git repository is required.

semantic-release cannot push the version tag to the branch master on remote Git repository with URL https://[email protected]/unagidev/react-flex.

Please refer to the authentication configuration documentation to configure the Git credentials on your CI environment and make sure the repositoryUrl is configured with a valid Git URL.

Good luck with your project ✨

Your semantic-release bot 📦🚀

unagidev / react-flex Goto Github PK

react-flex's Introduction