reflexy v3.52.6

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.

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/):

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](https://github.com/webpack-contrib/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.

Flex Statics

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](#Flex) and:

ViewSize

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

License

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