Reflexion

💎 React component to build layouts based on the CSS Flexbox model.

Features

• Provides a simple abstraction of the CSS Flexbox model
• Follows the Figma auto-layout model with similar properties
• Sets all necessary Flexbox parameters to enable scrolling

Usage

The component is exported from the main entry-point through an ES6 module:

import { Flex } from "reflexion";

The Flex component uses CSS definitions that must be imported in order to work appropriately:

@import "reflexion/dist/main.css";

[!NOTE] The CSS definitions use the :has pseudo-class, which is not supported on FireFox. To bypass this limitation, when using FireFox, Flex introspects its children with JavaScript code, which can have a slight performance impact.

Quick start

<Flex width="fill" height="fill">
  <Flex direction="vertical" gap={8}>
    <Flex>Toolbar</Flex>
    <Flex direction="vertical" height="fill" scroll>
      Main view
    </Flex>
    <Flex>Footer</Flex>
  </Flex>
</Flex>

Installation

Install with the Node Package Manager:

npm install reflexion

Documentation

Documentation is generated here.