{"id":13437319,"url":"https://github.com/roylee0704/react-flexbox-grid","last_synced_at":"2025-05-14T03:08:04.918Z","repository":{"id":38272806,"uuid":"46259702","full_name":"roylee0704/react-flexbox-grid","owner":"roylee0704","description":"A set of React components implementing flexboxgrid with the power of CSS Modules.","archived":false,"fork":false,"pushed_at":"2023-01-24T17:25:03.000Z","size":930,"stargazers_count":2936,"open_issues_count":61,"forks_count":204,"subscribers_count":30,"default_branch":"master","last_synced_at":"2025-04-10T02:16:46.295Z","etag":null,"topics":["css-modules","flexbox-grid","react-components"],"latest_commit_sha":null,"homepage":"http://roylee0704.github.io/react-flexbox-grid/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/roylee0704.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-11-16T07:47:50.000Z","updated_at":"2025-04-08T01:41:04.000Z","dependencies_parsed_at":"2023-01-25T04:00:40.812Z","dependency_job_id":null,"html_url":"https://github.com/roylee0704/react-flexbox-grid","commit_stats":null,"previous_names":[],"tags_count":44,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/roylee0704%2Freact-flexbox-grid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/roylee0704%2Freact-flexbox-grid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/roylee0704%2Freact-flexbox-grid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/roylee0704%2Freact-flexbox-grid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/roylee0704","download_url":"https://codeload.github.com/roylee0704/react-flexbox-grid/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248261933,"owners_count":21074225,"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-modules","flexbox-grid","react-components"],"created_at":"2024-07-31T03:00:55.953Z","updated_at":"2025-04-10T17:18:43.359Z","avatar_url":"https://github.com/roylee0704.png","language":"JavaScript","readme":"# react-flexbox-grid\n[![npm version](https://badge.fury.io/js/react-flexbox-grid.svg)](https://badge.fury.io/js/react-flexbox-grid)\n[![Build Status](https://travis-ci.org/roylee0704/react-flexbox-grid.svg)](https://travis-ci.org/roylee0704/react-flexbox-grid)\n[![NPM Status](http://img.shields.io/npm/dm/react-flexbox-grid.svg?style=flat)](https://www.npmjs.org/package/react-flexbox-grid)\n\n\n`react-flexbox-grid` is a set of React components that implement [flexboxgrid.css](https://goo.gl/imrHBZ). It even has an optional support for [CSS Modules](https://github.com/webpack-contrib/css-loader#css-modules) with some extra configuration.\n\n\n**http://roylee0704.github.io/react-flexbox-grid/**\n\n\nSetup\n-----\n\n### Installation\n\n`react-flexbox-grid` can be installed as an [npm package](https://www.npmjs.com/package/react-flexbox-grid):\n\n```\nnpm install --save react-flexbox-grid\n```\n\n### Minimal configuration\n\nThe recommended way to use `react-flexbox-grid` is with a tool like [webpack](https://webpack.js.org/) or [Meteor](https://www.meteor.com/), make sure you set it up to support requiring CSS files. For example, the minimum required loader configuration for webpack would look like this:\n\n```js\n{\n  test: /\\.css$/,\n  loader: 'style-loader!css-loader',\n  include: /flexboxgrid/\n}\n```\n\n`react-flexbox-grid` imports the styles from `flexboxgrid`, that's why we're configuring the loader for it.\n\n### CSS Modules\n\nIf you want to use CSS Modules (this is _mandatory_ for versions earlier than v1), webpack's [`css-loader`](https://github.com/webpack-contrib/css-loader) supports this by passing `modules` param in the loader configuration.\n\nFirst, install `style-loader` and `css-loader` as development dependencies:\n\n```\nnpm install --save-dev style-loader css-loader\n```\n\nNext, add a loader for `flexboxgrid` with CSS Modules enabled:\n\n```js\n{\n  test: /\\.css$/,\n  loader: 'style-loader!css-loader?modules',\n  include: /flexboxgrid/\n}\n```\n\nMake sure you don't have another CSS loader which also affects `flexboxgrid`. In case you do, exclude `flexboxgrid`, for example:\n\n```js\n{\n  test: /\\.css$/,\n  loader: 'style-loader!css-loader!postcss-loader',\n  include: path.join(__dirname, 'node_modules'), // oops, this also includes flexboxgrid\n  exclude: /flexboxgrid/ // so we have to exclude it\n}\n```\n\nOtherwise you would end up with an [obscure error](https://github.com/roylee0704/react-flexbox-grid/issues/94#issuecomment-282825720) because webpack stacks loaders together, it doesn't override them.\n\n### Isomorphic support\n\nTry: [this comment](https://github.com/roylee0704/react-flexbox-grid/issues/28#issuecomment-198758253).\n\nIf this doesn't work for you, use the build located in the dist directory. This build removes all `.css` imports and extracts the relevant css into `react-flexbox-grid/dist/react-flexbox-grid.css`.\n\n### Not using a bundler?\n\nUse the pre-bundled build located in the dist directory. It contains a single umd js distributable and built css file.\n\nUsage\n-----\n\nNow you can import and use the components:\n\n```jsx\nimport React from 'react';\nimport { Grid, Row, Col } from 'react-flexbox-grid';\n\nclass App extends React.Component {\n  render() {\n    return (\n      \u003cGrid fluid\u003e\n        \u003cRow\u003e\n          \u003cCol xs={6} md={3}\u003e\n            Hello, world!\n          \u003c/Col\u003e\n        \u003c/Row\u003e\n      \u003c/Grid\u003e\n    );\n  }\n}\n```\n\n### Gotcha\n\nFor the time being always use `fluid` for `\u003cGrid\u003e` to prevent [horizontal overflow issues](https://github.com/kristoferjoseph/flexboxgrid/issues/144).\n\n\nExample\n-------\nLooking for a complete example? Head over to [react-flexbox-grid-example](https://github.com/roylee0704/react-flexbox-grid-example).\n\n\nAdvanced composition\n-------\n\nWe also export functions for generating Row and Column class names for use in other components.\n\nFor example, suppose you're using a third party component that accepts `className` and you would like it to be rendered as `Col`.  You could do so by extracting the column sizing props that `MyComponent` uses and then pass the generated className on to `SomeComponent`\n\n\n```jsx\nimport React from 'react';\nimport { Row, Col, getRowProps, getColumnProps } from 'react-flexbox-grid';\n// a component that accepts a className\nimport SomeComponent from 'some-package';\n\nexport default function MyComponent(props) {\n  const colProps = getColumnProps(props);\n  const rowProps = getRowProps(props);\n\n  return (\n    \u003cform className={rowProps.className}\u003e\n      \u003cSomeComponent classname={colProps.className} /\u003e\n      \u003cinput value={props.value} onChange={props.onChange} /\u003e\n    \u003c/form\u003e\n  );\n}\n\nMyComponent.propTypes = Object.assign({\n  onChange: React.PropTypes.func.isRequired,\n  value: React.PropTypes.string.isRequired,\n}, Col.propTypes, Row.propTypes);  // Re-use existing Row and Col propType validations\n\n// Can now be rendered as: \u003cMyComponent end=\"sm\" sm={8} value=\"my input value\" onChange={...} /\u003e\n```\n\nContributors\n-----------\n[![Roy Lee](https://avatars0.githubusercontent.com/u/3850661?v=3\u0026s=144)](https://github.com/roylee0704/) | [![Helder Santana](https://avatars1.githubusercontent.com/u/134727?v=3\u0026s=144)](https://github.com/heldr/) | [![Matija Marohnić](https://avatars2.githubusercontent.com/u/471278?v=3\u0026s=144)](https://github.com/silvenon)\n---|---|---\n[Roy Lee](https://github.com/roylee0704) | [Helder Santana](https://github.com/heldr/) | [Matija Marohnić](https://github.com/silvenon)\n\nLicense\n-------\nMIT\n","funding_links":[],"categories":["Uncategorized","UI Layout","Soluções","JavaScript","目录"],"sub_categories":["Uncategorized","Form Components","\u003ca id=\"ui\"\u003eui\u003c/a\u003e"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Froylee0704%2Freact-flexbox-grid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Froylee0704%2Freact-flexbox-grid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Froylee0704%2Freact-flexbox-grid/lists"}