Skip to content
/ reflexy Public

Flexbox layout and responsive components.

License

Notifications You must be signed in to change notification settings

vlazh/reflexy

Repository files navigation

Reflexy npm package

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.

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.

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
    // ...
  ],
},

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

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.Keys]?: FlexAllProps<C> } Props per breakpoint.

ViewSize

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

License

MIT