Reflexy

Flexbox layout react components.

Reflexy is a React components for flexbox layout written in typescript.

With Reflexy

  • You don't need to worry about the prefixes of different browsers - Reflexy use an autoprefixer.
  • You don't need to do a concatenation of a lot of css classes:
    <div className={classNames(styles['flex'], styles['flex-column'], styles['flex-align-center'], ...)}>
  {children}
</div>
    vs
    <Flex column alignItems="center" className="custom-class">{children}</Flex>
  • You can replace default output div tag:
    <Flex tagName="header">{children}</Flex>
    output:
    <header class="...">{children}</header>
  • You can tweak you own react component with flexbox layout (your component must accept className through props):
    <Flex
  component={MyComponent}
  column
  alignSelf="center"
  myProp="myPropValue"
  className={styles['my-class']}
>
  {children}
</Flex>
    will be
    <MyComponent myProp="myPropValue" className="[reflexy classes] my-class">{children}</MyComponent>

Installation

yarn add react reflexy

or

npm install --save react reflexy

Reflexy has own css files so you need provide loader for css files placed in node_modules folder. With webpack it's maybe css-loader:

{
  test: /\.css$/,
  include: path.join(__dirname, 'node_modules'),
  // or
  include: /reflexy/
  use: [
    { loader: 'style-loader' },
    {
      loader: 'css-loader',
      options: {
        modules: true,
        localIdentName: '[local]',
      },
    },
  ],
},

Usage

import { Flex } from 'reflexy';

...

<Flex row justifyContent="center">
  ...
</Flex>

Props

Flex

Default style is just display: flex;

  • inline?: boolean; - Sets display to inline-flex.
  • alignContent?: 'center' | 'flex-start' | 'flex-end' | 'space-between' | 'space-around' | 'stretch' | 'initial' | 'inherit'; - Sets align-content to corresponding value.
  • alignItems?: 'center' | 'flex-start' | 'flex-end' | 'stretch' | 'baseline' | 'initial' | 'inherit'; - Sets align-items to corresponding value.
  • alignSelf?: 'center' | 'flex-start' | 'flex-end' | 'stretch' | 'baseline' | 'auto' | 'initial' | 'inherit'; - Sets align-self to corresponding value.
  • justifyContent?: 'center' | 'flex-start' | 'flex-end' | 'space-between' | 'space-around' | 'initial' | 'inherit'; - Sets justify-content to corresponding value.
  • basis?: 'none' | 'auto' | 'fill' | 'content' |fit-content' | 'min-content' | 'max-content'; - Sets flex-basis to corresponding value.
  • grow?: 0..24; - Sets flex-grow to corresponding value. Also accepts boolean value: true is equals to 1, false is equals to 0.
  • shrink?: 0..24; - Sets flex-shrink to corresponding value. Also accepts boolean value: true is equals to 1, false is equals to 0.
  • row?: boolean; - Sets flow-direction to row.
  • column?: boolean; - Sets flow-direction to column. Takes a precedence over row.
  • reverse?: boolean; - Used with row or col. Sets flow-direction to column-reverse or row-reverse.
  • wrap?: boolean | 'reverse'; - Sets flex-wrap to wrap or wrap-reverse.
  • order?: number; - Sets order to corresponding value.
  • hfill?: boolean; - Stretch by horizontal.
  • vfill?: boolean; - Stretch by vertical.
  • fill?: 'v' | 'h' | 'all'; - Stretch by v - vertical or h - horizontal or all - both. Also accepts boolean value: true is equals to all.
  • component?: React.ComponentType<any>; - Sets React component as a container. Component must accept className through props.
  • tagName?: string; - Html tag name for output container. Takes a precedence over component.
  • center?: boolean; - Sets justifyContent and alignItems to center. Takes a precedence over justifyContent and alignItems.
  • className?: string; - CSS class name.
  • style?: React.CSSProperties; - Inline styles.
  • and all other props of html element.

TODO

If you need more features or you find a bug, please, open an issue or make PR.

GitHub