Skip to content

Instantly share code, notes, and snippets.

@rcanepa
Forked from jorilallo/Flex.js
Created August 22, 2017 00:52
Show Gist options
  • Save rcanepa/eee144d395d627603d18c1126eac0a06 to your computer and use it in GitHub Desktop.
Save rcanepa/eee144d395d627603d18c1126eac0a06 to your computer and use it in GitHub Desktop.
Flexbox component for React
// @flow
import React from 'react';
import styled from 'styled-components';
type GlobalCssValues = 'initial' | 'inherit' | 'unset';
type WrapValue = 'nowrap' | 'wrap' | 'wrap-reverse' | GlobalCssValues;
type JustifyValue =
| 'center'
| 'start'
| 'end'
| 'flex-start'
| 'flex-end'
| 'left'
| 'right'
| 'baseline'
| 'first baseline'
| 'last baseline'
| 'space-between'
| 'space-around'
| 'space-evenly'
| 'stretch'
| 'safe center'
| 'unsafe center'
| GlobalCssValues;
type AlignValue =
| 'normal'
| 'stretch'
| 'center'
| 'start'
| 'end'
| 'flex-start'
| 'flex-end'
| 'self-start'
| 'self-end'
| 'left'
| 'right'
| 'first baseline'
| 'last baseline'
| 'safe center'
| 'unsafe center'
| GlobalCssValues;
export type Props = {
auto?: boolean,
column?: boolean,
reverse?: boolean,
justify?: JustifyValue,
align?: AlignValue,
wrap?: WrapValue,
className?: string,
};
const FlexBox = styled.div`
display: flex;
${({ auto }) => (auto ? 'flex: 1 1 auto;' : '')}
${({ justify }) => (justify ? `justify-content: ${justify};` : '')}
${({ align }) => (align ? `align-items: ${align};` : '')}
${({ wrap }) => (wrap ? `flex-wrap: ${wrap};` : '')}
flex-direction: ${({ column, reverse }) => {
const postFix = reverse ? '-reverse' : '';
return column ? `column${postFix}` : `row${postFix}`;
}};
`;
export default (props: Props) => <FlexBox {...props} />;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment