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.

  There are two versions of styled Flex:

  • styled/Flex - powered by modern styling solution by @mui with emotion or styled-components or whatever.
  • styled/jss/Flex - powered by JSS.

• 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.

• styled/StyledReflexyJssWebpackPlugin - same as styled/StyledReflexyWebpackPlugin but for styled/jss/Flex.

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

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

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

Installation

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

If you use styled version you should also install @mui packages and jss-preset-default if you use JSS version.

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:

{
  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

import { Flex, TweakableElementWrapper } from 'reflexy';

<Flex row justifyContent="center">
  ...
</Flex>

<Flex row justifyContent="center" component={TweakableElementWrapper} element={<button />}>
  ...
</Flex>

<Flex row justifyContent="center" component="button" onClick={...}>
  ...
</Flex>

<Flex row justifyContent="center" componentRef={componentRef}>
  ...
</Flex>

<Flex row justifyContent="center" component={CustomComponent} componentProp1={...} componentProp2={...}>
  ...
</Flex>

<Flex ml pb>
  ...
</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.
componentRef?	React.Ref	Uses when component provides ref.
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

import { ResponsiveFlex } from 'reflexy/responsive';

// `breakpoints` values will override default values for `row` and `order`.
<ResponsiveFlex
  row
  order={1}
  breakpoints={{
    l: { column: true, order: 2 },
    xxs: { alignItems: 'center', order: 4 },
  }}
>
  ...
</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]?: FlexAllProps<C> }	Props per breakpoint.

ViewSize

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

License

MIT