reaflex

Easy Flexbox in React

Install

npm i reaflex

Or

yarn add reaflex

It expects the following to be installed as peer dependencies

• react >= 16.8.0
• react-dom >= 16.8.0
• styled-components >= 4.4.1
• prop-types >= 15.7.0

Use

import { Flex, Item } from "reaflex";

const MyComponent = () => {
  return (
    <Flex direction="column" alignItems="center" justifyContent="center">
      <Item alignSelf="flex-end">Hello</Item>
      <Item as="span">Flex</Item>
      <Item alignSelf="flex-start">Box</Item>
    </Flex>
  );
};

Props

Flex

| Prop | Type | Description | | -------------- | ------- | --------------------------------------------------------------------------------------------------- | | as | React.ElementType | The element to render. Defaults to div. | | inline | boolean | Sets the display property to inline-flex when true and flex otherwise. Defaults to false. | | direction | string | Sets the flex-direction property. | | alignItems | string | Sets the align-items property. | | justifyContent | string | Sets the justify-content property. | | wrap | string | Sets the flex-wrap property. | | flow | string | Sets the flex-flow property. | | gap | string | Sets the gap property. | | rowGap | string | Sets the row-gap property. | | columnGap | string | Sets the column-gap property. |

Item

| Prop | Type | Description | | --------- | ---------------- | ------------------------------------------ | | as | React.ElementType | The element to render. Defaults to div. | | order | number | Sets the order property. | | alignSelf | string | Sets the align-self property. | | grow | string or number | Sets the flex-grow property. | | shrink | string or number | Sets the flex-shrink property. | | basis | string | Sets the flex-basis property. | | flex | string or number | Sets the flex property. |

Demo

See it running in action in this demo.

License

MIT Copyright (c) Maroun Baydoun.