{"id":21943026,"url":"https://github.com/vlazh/reflexy","last_synced_at":"2025-04-22T18:46:22.555Z","repository":{"id":52235745,"uuid":"102218284","full_name":"vlazh/reflexy","owner":"vlazh","description":"Flexbox layout and responsive components.","archived":false,"fork":false,"pushed_at":"2025-04-04T05:15:45.000Z","size":4909,"stargazers_count":8,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-10T16:52:17.684Z","etag":null,"topics":["css","flex","flexbox","flexbox-layout","layout","media-queries","react","react-components","react-flex","react-flexbox","responsive","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vlazh.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-09-02T19:16:01.000Z","updated_at":"2025-04-04T05:15:48.000Z","dependencies_parsed_at":"2023-09-25T06:46:16.956Z","dependency_job_id":"ea8e40da-3ff9-41d0-aa14-8ff71ae9cf24","html_url":"https://github.com/vlazh/reflexy","commit_stats":{"total_commits":713,"total_committers":1,"mean_commits":713.0,"dds":0.0,"last_synced_commit":"34cf94e92088161fd8101d2ea4fd28e81f3599be"},"previous_names":[],"tags_count":254,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vlazh%2Freflexy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vlazh%2Freflexy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vlazh%2Freflexy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vlazh%2Freflexy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vlazh","download_url":"https://codeload.github.com/vlazh/reflexy/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250053607,"owners_count":21367036,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","flex","flexbox","flexbox-layout","layout","media-queries","react","react-components","react-flex","react-flexbox","responsive","typescript"],"created_at":"2024-11-29T03:27:42.592Z","updated_at":"2025-04-22T18:46:22.549Z","avatar_url":"https://github.com/vlazh.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Reflexy [![npm package](https://img.shields.io/npm/v/reflexy.svg?style=flat-square)](https://www.npmjs.org/package/reflexy)\n\n**Reflexy** is react components library for flexbox and responsive layouts:\n\n- **[Flex](#Flex)** - flexbox layout with paddings and margins support.\n- **[styled/Flex](#Flex)** - styled version of `Flex` powered by [@mui](https://mui.com/system/getting-started/).\n\n- **`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.\n- **`FlexWithRef`** - `Flex` with forwarded ref.\n- **`TweakableElementWrapper`** - Wrapper for react element in order to use it with `component` prop of `Flex`.\n- **`responsive/Responsive`** - container with breakpoints.\n- **`responsive/ResponsiveRender`** - conditional render by breakpoints.\n- **[responsive/ResponsiveFlex](#ResponsiveFlex)** - Like `Flex` but with breakpoints.\n- **`responsive/useMediaQuery`** - React hook for media queries.\n- **`responsive/MediaQuery`** - utils for work with media queries and breakpoints.\n\n## \u003ca id=\"mq\" /\u003eCustom media queries\n\nUsed in CSS.\n\n| Name | Value |\n| :------ | :------------------------------------------------------------ |\n| `--xxs` | `only screen and (max-width: 479px)` |\n| `--xs` | `only screen and (min-width: 480px) and (max-width: 767px)` |\n| `--s` | `only screen and (min-width: 768px) and (max-width: 991px)` |\n| `--m` | `only screen and (min-width: 992px) and (max-width: 1279px)` |\n| `--l` | `only screen and (min-width: 1280px) and (max-width: 1919px)` |\n| `--xl` | `only screen and (min-width: 1920px) and (max-width: 2559px)` |\n| `--xxl` | `only screen and (min-width: 2560px)` |\n\nCustom media queries can be used with [postcss-custom-media](https://github.com/postcss/postcss-custom-media#importfrom).\nExample of configuration with [preset-env](https://preset-env.cssdb.org/):\n\n```js\nconst exportMediaQueries = require('reflexy/responsive/exportMediaQueries');\n\nmodule.exports = {\n plugins: {\n 'postcss-preset-env': {\n features: {\n 'custom-media-queries': {\n importFrom: [{ customMedia: exportMediaQueries() }],\n },\n },\n },\n },\n};\n```\n\n## Installation\n\n```sh\nyarn add react reflexy\n# or\nnpm install --save react reflexy\n```\n\n\u003e If you use styled version you should also install `@mui` packages.\n\n**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):\n\n```js\n{\n test: /\\.css$/,\n include: path.join(__dirname, 'node_modules'),\n // or\n include: /reflexy/,\n use: [\n // ...\n { loader: 'css-loader', options: { modules: true } }, // enabled css-modules is necessary\n // ...\n ],\n},\n```\n\n## \u003ca id=\"Flex\" /\u003eFlex\n\n### Usage\n\n```jsx\nimport { Flex, TweakableElementWrapper } from 'reflexy';\n\n\u003cFlex row justifyContent=\"center\"\u003e\n ...\n\u003c/Flex\u003e\n\n\u003cFlex row justifyContent=\"center\" component={TweakableElementWrapper} element={\u003cbutton /\u003e}\u003e\n ...\n\u003c/Flex\u003e\n\n\u003cFlex row justifyContent=\"center\" component=\"button\" onClick={...}\u003e\n ...\n\u003c/Flex\u003e\n\n\u003cFlex row justifyContent=\"center\" ref={ref}\u003e\n ...\n\u003c/Flex\u003e\n\n\u003cFlex row justifyContent=\"center\" component={CustomComponent} componentProp1={...} componentProp2={...}\u003e\n ...\n\u003c/Flex\u003e\n\n\u003cFlex ml pb\u003e\n ...\n\u003c/Flex\u003e;\n```\n\n### Props\n\nDefault style is just `display: flex`.\n\n| Prop | Type | Description |\n| :----------------- | :------------------------------------------------------------------------------------------------------------------------------------------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `flex?` | `boolean` | Sets `display` to `flex`. |\n| `inline?` | `boolean` | Sets `display` to `inline-flex`. |\n| `row?` | `boolean` | Sets `flow-direction` to `row`. |\n| `column?` | `boolean` | Sets `flow-direction` to `column`. Takes a precedence over `row`. |\n| `reverse?` | `boolean` | Used with `row` or `col`. Sets `flow-direction` to `column-reverse` or `row-reverse`. |\n| `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`. |\n| `alignContent?` | `'inherit' \\| 'initial' \\| 'unset' \\| 'center' \\| 'flex-start' \\| 'flex-end' \\| 'space-between' \\| 'space-around' \\| 'space-evenly' \\| 'stretch'` | Sets `align-content` to corresponding value. |\n| `alignItems?` | `'inherit' \\| 'initial' \\| 'unset' \\| 'center' \\| 'flex-start' \\| 'flex-end' \\| 'stretch' \\| 'baseline'` | Sets `align-items` to corresponding value. |\n| `alignSelf?` | `'inherit' \\| 'initial' \\| 'unset' \\| 'center' \\| 'flex-start' \\| 'flex-end' \\| 'stretch' \\| 'baseline' \\| 'auto' \\| 'initial' \\| 'inherit'` | Sets `align-self` to corresponding value. |\n| `justifyContent?` | `'inherit' \\| 'initial' \\| 'unset' \\| 'center' \\| 'flex-start' \\| 'flex-end' \\| 'space-between' \\| 'space-around' \\| 'space-evenly'` | Sets `justify-content` to corresponding value. |\n| `center?` | `boolean` | Sets `justifyContent` and `alignItems` to `center`. `justifyContent` and `alignItems` take a precedence over `center`. |\n| `basis?` | `'inherit' \\| 'initial' \\| 'unset' \\| 'auto' \\| 'content' \\| 'number'` | Sets `flex-basis` to corresponding value. |\n| `grow?` | `0..24 \\| boolean` | Sets `flex-grow` to corresponding value. `true` is equals to `1`, `false` is equals to `0`. |\n| `shrink?` | `0..24 \\| boolean` | Sets `flex-shrink` to corresponding value. `true` is equals to `1`, `false` is equals to `0`. |\n| `order?` | `number` | Sets `order` to corresponding value. |\n| `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). |\n| `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). |\n| `fill?` | `boolean` | Stretch by vertical and horizontal. |\n| `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`.\u003cbr\u003e`true` by default |\n| `shrinkWidth?` | `boolean` | Sets `min-width` to `0`. Takes a precedence over `shrinkByContent`. |\n| `shrinkHeight?` | `boolean` | Sets `min-height` to `0`. Takes a precedence over `shrinkByContent`. |\n| `className?` | `string` | CSS class name. |\n| `style?` | `React.CSSProperties` | Inline styles. |\n| `component?` | `React.ElementType\u003cP\u003e` | Sets custom react component as a container. Component must accept className and style through props. |\n| `unit?` | `string` | Measure unit of space |\n| `mSize?` | `'xs' \\| 's' \\| 'm' \\| 'l' \\| 'xl' \\| 'xxl' \\| number` | Size of `margin` |\n| `m?` | `typeof mSize \\| boolean` | `margin`. Scaling value. |\n| `mt?` | `typeof mSize \\| boolean` | `margin-top` |\n| `mr?` | `typeof mSize \\| boolean` | `margin-right` |\n| `mb?` | `typeof mSize \\| boolean` | `margin-bottom` |\n| `ml?` | `typeof mSize \\| boolean` | `margin-left` |\n| `mx?` | `typeof mSize \\| boolean` | `margin` by x axis: `margin-left` \u0026 `margin-right` |\n| `my?` | `typeof mSize \\| boolean` | `margin` by y axis: `margin-top` \u0026 `margin-bottom` |\n| `pSize?` | `'xs' \\| 's' \\| 'm' \\| 'l' \\| 'xl' \\| 'xxl' \\| number` | Size of `padding` |\n| `p?` | `typeof pSize \\| boolean` | `padding`. Scaling value. |\n| `pt?` | `typeof pSize \\| boolean` | `padding-top` |\n| `pr?` | `typeof pSize \\| boolean` | `padding-right` |\n| `pb?` | `typeof pSize \\| boolean` | `padding-bottom` |\n| `pl?` | `typeof pSize \\| boolean` | `padding-left` |\n| `px?` | `typeof pSize \\| boolean` | `padding` by x axis: `padding-left` \u0026 `padding-right` |\n| `py?` | `typeof pSize \\| boolean` | `padding` by y axis: `padding-top` \u0026 `padding-bottom` |\n\n### Flex Statics\n\n| Prop | Type | Description |\n| :------------- | :----------------------------------------------------------- | :--------------------------------------------------------------------------- |\n| `defaultUnit` | `string` | Measure unit of space. Default: `rem`. |\n| `defaultSize` | `'xs' \\| 's' \\| 'm' \\| 'l' \\| 'xl' \\| 'xxl'` | Default: `'m'`. |\n| `defaultSizes` | `Record\u003c'xs' \\| 's' \\| 'm' \\| 'l' \\| 'xl' \\| 'xxl', number\u003e` | Space sizes. Default: `{ xs: 0.25, s: 0.5, m: 1, l: 1.5, xl: 2, xxl: 2.5 }`. |\n\n## \u003ca id=\"ResponsiveFlex\" /\u003eResponsiveFlex\n\n### Usage\n\n```jsx\nimport { ResponsiveFlex } from 'reflexy/responsive';\n\n// `breakpoints` values will override default values for `row` and `order`.\n\u003cResponsiveFlex\n row\n order={1}\n breakpoints={{\n l: { column: true, order: 2 },\n xxs: { alignItems: 'center', order: 4 },\n }}\n\u003e\n ...\n\u003c/ResponsiveFlex\u003e;\n```\n\n### Props\n\nAll props of [Flex](#Flex) and:\n\n| Prop | Type | Description |\n| :------------ | :------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `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`. |\n| `breakpoints` | `{ [P in ViewSize.Keys]?: FlexAllProps\u003cC\u003e }` | Props per breakpoint. |\n\n### ViewSize\n\nSame as [Custom media queries](#mq) but names without prefix `--`.\n\n## License\n\n[MIT](https://opensource.org/licenses/mit-license.php)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvlazh%2Freflexy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvlazh%2Freflexy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvlazh%2Freflexy/lists"}