Installations

npm install reflexy

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

23.9.0

NPM Version

10.9.2 Pull Requests

Open

0

Total

2

Closed

2

Issues

Open

0

Total

0

Closed

0

Releases

Unable to fetch releases

Languages

3

TypeScript

CSS

JavaScript

TypeScript (90.76%)

CSS (8.28%)

JavaScript (0.96%)

Developer

vlazh

Download Statistics

Total Downloads

0

Last Day

0

Last Week

0

Last Month

0

Last Year

0

GitHub Statistics

MIT License

8 Stars

743 Commits

2 Forks

1 Watchers

1 Branches

1 Contributors

Updated on Apr 27, 2025

Maintainers

1

View All 1 Contributors

Package Meta Information

Latest Version

3.58.1

Package Id

reflexy@3.58.1

Unpacked Size

1.07 MB

Size

200.87 kB

File Count

73

NPM Version

10.9.2

Node Version

23.9.0

Published on

Apr 27, 2025

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

0%

NaN

Compared to previous day

Last Week

0%

NaN

Compared to previous week

Last Month

0%

NaN

Compared to previous month

Last Year

0%

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

1

react

Dev Dependencies

29

Reflexy

Reflexy is react components library for flexbox and responsive layouts:

Flex - flexbox layout with paddings and margins support.
styled/Flex - styled version of Flex powered by @mui.
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 - 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. Example of configuration with preset-env:

1const exportMediaQueries = require('reflexy/responsive/exportMediaQueries');
2
3module.exports = {
4  plugins: {
5    'postcss-preset-env': {
6      features: {
7        'custom-media-queries': {
8          importFrom: [{ customMedia: exportMediaQueries() }],
9        },
10      },
11    },
12  },
13};

Installation

1yarn add react reflexy
2# or
3npm 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:

1{
2  test: /\.css$/,
3  include: path.join(__dirname, 'node_modules'),
4  // or
5  include: /reflexy/,
6  use: [
7    // ...
8    { loader: 'css-loader', options: { modules: true } }, // enabled css-modules is necessary
9    // ...
10  ],
11},

Flex

Usage

1import { Flex, TweakableElementWrapper } from 'reflexy';
2
3<Flex row justifyContent="center">
4  ...
5</Flex>
6
7<Flex row justifyContent="center" component={TweakableElementWrapper} element={<button />}>
8  ...
9</Flex>
10
11<Flex row justifyContent="center" component="button" onClick={...}>
12  ...
13</Flex>
14
15<Flex row justifyContent="center" ref={ref}>
16  ...
17</Flex>
18
19<Flex row justifyContent="center" component={CustomComponent} componentProp1={...} componentProp2={...}>
20  ...
21</Flex>
22
23<Flex ml pb>
24  ...
25</Flex>;

Props

Default style is just display: flex.

Prop	Type	Description
`flex?`	`boolean`	Sets `display` to `flex`.
`inline?`	`boolean`	Sets `display` to `inline-flex`.
`row?`	`boolean`	Sets `flow-direction` to `row`.
`column?`	`boolean`	Sets `flow-direction` to `column`. Takes a precedence over `row`.
`reverse?`	`boolean`	Used with `row` or `col`. Sets `flow-direction` to `column-reverse` or `row-reverse`.
`wrap?`	`boolean \| 'inherit' \| 'initial' \| 'unset' \| 'nowrap' \| 'wrap' \| 'wrap-reverse'`	Sets `flex-wrap` to corresponding value. Also accepts boolean value: `true` equals to `wrap`, `false` equals to `nowrap`.
`alignContent?`	`'inherit' \| 'initial' \| 'unset' \| 'center' \| 'flex-start' \| 'flex-end' \| 'space-between' \| 'space-around' \| 'space-evenly' \| 'stretch'`	Sets `align-content` to corresponding value.
`alignItems?`	`'inherit' \| 'initial' \| 'unset' \| 'center' \| 'flex-start' \| 'flex-end' \| 'stretch' \| 'baseline'`	Sets `align-items` to corresponding value.
`alignSelf?`	`'inherit' \| 'initial' \| 'unset' \| 'center' \| 'flex-start' \| 'flex-end' \| 'stretch' \| 'baseline' \| 'auto' \| 'initial' \| 'inherit'`	Sets `align-self` to corresponding value.
`justifyContent?`	`'inherit' \| 'initial' \| 'unset' \| 'center' \| 'flex-start' \| 'flex-end' \| 'space-between' \| 'space-around' \| 'space-evenly'`	Sets `justify-content` to corresponding value.
`center?`	`boolean`	Sets `justifyContent` and `alignItems` to `center`. `justifyContent` and `alignItems` take a precedence over `center`.
`basis?`	`'inherit' \| 'initial' \| 'unset' \| 'auto' \| 'content' \| 'number'`	Sets `flex-basis` to corresponding value.
`grow?`	`0..24 \| boolean`	Sets `flex-grow` to corresponding value. `true` is equals to `1`, `false` is equals to `0`.
`shrink?`	`0..24 \| boolean`	Sets `flex-shrink` to corresponding value. `true` is equals to `1`, `false` is equals to `0`.
`order?`	`number`	Sets `order` to corresponding value.
`hfill?`	`boolean \| number in range 0.0 to 1.0 inclusive`	Stretch by horizontal or sets width in percentage (numbers in range 0.0 to 1.0 inclusive).
`vfill?`	`boolean \| number in range 0.0 to 1.0 inclusive`	Stretch by vertical or sets height in percentage (numbers in range 0.0 to 1.0 inclusive).
`fill?`	`boolean`	Stretch by vertical and horizontal.
`shrinkByContent?`	`boolean`	Sets `min-width: 0` and `min-height: 0`. By default, a flex item cannot be smaller than the size of its content. The initial setting on flex items is `min-width: auto` and `min-height: auto`. One way to enable flex items to shrink past their content is to set a flex item to `min-width: 0` or `min-height: 0`. `true` by default
`shrinkWidth?`	`boolean`	Sets `min-width` to `0`. Takes a precedence over `shrinkByContent`.
`shrinkHeight?`	`boolean`	Sets `min-height` to `0`. Takes a precedence over `shrinkByContent`.
`className?`	`string`	CSS class name.
`style?`	`React.CSSProperties`	Inline styles.
`component?`	`React.ElementType<P>`	Sets custom react component as a container. Component must accept className and style through props.
`unit?`	`string`	Measure unit of space
`mSize?`	`'xs' \| 's' \| 'm' \| 'l' \| 'xl' \| 'xxl' \| number`	Size of `margin`
`m?`	`typeof mSize \| boolean`	`margin`. Scaling value.
`mt?`	`typeof mSize \| boolean`	`margin-top`
`mr?`	`typeof mSize \| boolean`	`margin-right`
`mb?`	`typeof mSize \| boolean`	`margin-bottom`
`ml?`	`typeof mSize \| boolean`	`margin-left`
`mx?`	`typeof mSize \| boolean`	`margin` by x axis: `margin-left` & `margin-right`
`my?`	`typeof mSize \| boolean`	`margin` by y axis: `margin-top` & `margin-bottom`
`pSize?`	`'xs' \| 's' \| 'm' \| 'l' \| 'xl' \| 'xxl' \| number`	Size of `padding`
`p?`	`typeof pSize \| boolean`	`padding`. Scaling value.
`pt?`	`typeof pSize \| boolean`	`padding-top`
`pr?`	`typeof pSize \| boolean`	`padding-right`
`pb?`	`typeof pSize \| boolean`	`padding-bottom`
`pl?`	`typeof pSize \| boolean`	`padding-left`
`px?`	`typeof pSize \| boolean`	`padding` by x axis: `padding-left` & `padding-right`
`py?`	`typeof pSize \| boolean`	`padding` by y axis: `padding-top` & `padding-bottom`

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

1import { ResponsiveFlex } from 'reflexy/responsive';
2
3// `breakpoints` values will override default values for `row` and `order`.
4<ResponsiveFlex
5  row
6  order={1}
7  breakpoints={{
8    l: { column: true, order: 2 },
9    xxs: { alignItems: 'center', order: 4 },
10  }}
11>
12  ...
13</ResponsiveFlex>;

Props

All props of 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<C> }`	Props per breakpoint.

ViewSize

Same as Custom media queries but names without prefix --.

License

MIT

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

9

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

5

Maintained

Determines if the project is "actively maintained".

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

SAST

Determines if the project uses static code analysis.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

Score

3.6

/10

Last Scanned on 2025-06-30

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More