https://github.com/nevoland/reflexion

💎 React component to build layouts based on the CSS Flexbox model.
https://github.com/nevoland/reflexion

Last synced: about 13 hours ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/nevoland/reflexion
• Owner: nevoland
• Created: 2023-12-13T08:18:11.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2024-10-30T16:42:38.000Z (16 days ago)
• Last Synced: 2024-11-11T11:08:18.680Z (5 days ago)
• Language: TypeScript
• Homepage:
• Size: 1.69 MB
• Stars: 2
• Watchers: 0
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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:

```js

import { Flex } from "reflexion";

```

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

```css

@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

```tsx

import { Flex } from "reflexion";

function Main() {

  return (

    

      

        Toolbar

        

          Main view

        

        Footer

      

    

  );

}

```

## Installation

Install with the [Node Package Manager](https://www.npmjs.com/package/reflexion):

```bash

npm install reflexion

```

## Documentation

Documentation is generated [here](doc/README.md).