Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/vlazh/reflexy

Flexbox layout and responsive components.
https://github.com/vlazh/reflexy

css flex flexbox flexbox-layout layout media-queries react react-components react-flex react-flexbox responsive typescript

Last synced: about 1 month ago
JSON representation

Flexbox layout and responsive components.

Host: GitHub
URL: https://github.com/vlazh/reflexy
Owner: vlazh
License: mit
Created: 2017-09-02T19:16:01.000Z (over 7 years ago)
Default Branch: master
Last Pushed: 2024-08-05T13:06:07.000Z (5 months ago)
Last Synced: 2024-11-21T19:43:16.545Z (about 1 month ago)
Topics: css, flex, flexbox, flexbox-layout, layout, media-queries, react, react-components, react-flex, react-flexbox, responsive, typescript
Language: TypeScript
Homepage:
Size: 2.6 MB
Stars: 8
Watchers: 1
Forks: 2
Open Issues: 0
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE

Awesome Lists containing this project

README

# Reflexy [![npm package](https://img.shields.io/npm/v/reflexy.svg?style=flat-square)](https://www.npmjs.org/package/reflexy)

**Reflexy** is react components library for flexbox and responsive layouts:

- **[Flex](#Flex)** - flexbox layout with paddings and margins support.
- **[styled/Flex](#Flex)** - styled version of `Flex` powered by [@mui](https://mui.com/system/getting-started/).

- **`styled/StyledReflexyWebpackPlugin`** - webpack plugin for replace regular imports of `Flex` with `styled/Flex`. Just import `Flex` like `import { Flex, FlexWithRef } from 'reflexy';` or `import { ResponsiveFlex } from 'reflexy/responsive';` and `styled/Flex` will be used instead.
- **`FlexWithRef`** - `Flex` with forwarded ref.
- **`TweakableElementWrapper`** - Wrapper for react element in order to use it with `component` prop of `Flex`.
- **`responsive/Responsive`** - container with breakpoints.
- **`responsive/ResponsiveRender`** - conditional render by breakpoints.
- **[responsive/ResponsiveFlex](#ResponsiveFlex)** - Like `Flex` but with breakpoints.
- **`responsive/useMediaQuery`** - React hook for media queries.
- **`responsive/MediaQuery`** - utils for work with media queries and breakpoints.

## Custom media queries

Used in CSS.

| Name | Value |
| :------ | :------------------------------------------------------------ |
| `--xxs` | `only screen and (max-width: 479px)` |
| `--xs` | `only screen and (min-width: 480px) and (max-width: 767px)` |
| `--s` | `only screen and (min-width: 768px) and (max-width: 991px)` |
| `--m` | `only screen and (min-width: 992px) and (max-width: 1279px)` |
| `--l` | `only screen and (min-width: 1280px) and (max-width: 1919px)` |
| `--xl` | `only screen and (min-width: 1920px) and (max-width: 2559px)` |
| `--xxl` | `only screen and (min-width: 2560px)` |

Custom media queries can be used with [postcss-custom-media](https://github.com/postcss/postcss-custom-media#importfrom).
Example of configuration with [preset-env](https://preset-env.cssdb.org/):

```js
const exportMediaQueries = require('reflexy/responsive/exportMediaQueries');

module.exports = {
plugins: {
'postcss-preset-env': {
features: {
'custom-media-queries': {
importFrom: [{ customMedia: exportMediaQueries() }],
},
},
},
},
};
```

## Installation

```sh
yarn add react reflexy
# or
npm install --save react reflexy
```

> If you use styled version you should also install `@mui` packages.

**Reflexy** has own css files so you need provide loader for css files placed in node_modules folder (only if you do not use styled version). With webpack it could be [css-loader](https://github.com/webpack-contrib/css-loader):

```js
{
test: /\.css$/,
include: path.join(__dirname, 'node_modules'),
// or
include: /reflexy/,
use: [
// ...
{ loader: 'css-loader', options: { modules: true } }, // enabled css-modules is necessary
// ...
],
},
```

## Flex

### Usage

```jsx
import { Flex, TweakableElementWrapper } from 'reflexy';

...

}>
...

...

...
;
```

### Props

Default style is just `display: flex`.

### Flex Statics

| Prop | Type | Description |
| :------------- | :----------------------------------------------------------- | :--------------------------------------------------------------------------- |
| `defaultUnit` | `string` | Measure unit of space. Default: `rem`. |
| `defaultSize` | `'xs' \| 's' \| 'm' \| 'l' \| 'xl' \| 'xxl'` | Default: `'m'`. |
| `defaultSizes` | `Record<'xs' \| 's' \| 'm' \| 'l' \| 'xl' \| 'xxl', number>` | Space sizes. Default: `{ xs: 0.25, s: 0.5, m: 1, l: 1.5, xl: 2, xxl: 2.5 }`. |

## ResponsiveFlex

### Usage

```jsx
import { ResponsiveFlex } from 'reflexy/responsive';

// `breakpoints` values will override default values for `row` and `order`.

...
;
```

### Props

All props of [Flex](#Flex) and:

| Prop | Type | Description |
| :------------ | :------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `merge?` | `boolean \| BreakpointsMergeType` | `down` - merge from top to down until current view size. `top` - merge from down to top until current view size. `true` treats as `down`. `false` - no merge, use only exact breakpoint. Default `true`. |
| `breakpoints` | `{ [P in ViewSize.Keys]?: FlexAllProps }` | Props per breakpoint. |

### ViewSize

Same as [Custom media queries](#mq) but names without prefix `--`.

## License

[MIT](https://opensource.org/licenses/mit-license.php)