Reaflex NPM | npm.io

reaflex

Easy Flexbox in React

Install

npm i reaflex

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.

flexbox react styled-components

@infinitebrahmanuniverse/nolb-reaf @everything-registry/sub-chunk-2629

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago