npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

reflexy

v3.52.4

Published

Flexbox layout react components

Downloads

653

Readme

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.

    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