{"id":13437297,"url":"https://github.com/broucz/react-inline-grid","last_synced_at":"2025-05-01T09:55:26.370Z","repository":{"id":45304840,"uuid":"41090093","full_name":"broucz/react-inline-grid","owner":"broucz","description":"Predictable flexbox based grid for React.","archived":false,"fork":false,"pushed_at":"2020-07-15T19:54:40.000Z","size":325,"stargazers_count":167,"open_issues_count":12,"forks_count":5,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-05-01T09:55:19.400Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://broucz.github.io/react-inline-grid/","language":"JavaScript","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/broucz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-08-20T10:29:31.000Z","updated_at":"2025-01-30T16:52:37.000Z","dependencies_parsed_at":"2022-08-04T13:30:22.401Z","dependency_job_id":null,"html_url":"https://github.com/broucz/react-inline-grid","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/broucz%2Freact-inline-grid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/broucz%2Freact-inline-grid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/broucz%2Freact-inline-grid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/broucz%2Freact-inline-grid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/broucz","download_url":"https://codeload.github.com/broucz/react-inline-grid/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251856993,"owners_count":21655119,"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":[],"created_at":"2024-07-31T03:00:55.780Z","updated_at":"2025-05-01T09:55:26.351Z","avatar_url":"https://github.com/broucz.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized","UI Layout","Soluções","Marks"],"sub_categories":["Uncategorized","Form Components","[React - A JavaScript library for building user interfaces](http://facebook.github.io/react)"],"readme":"# [React Inline Grid](http://broucz.github.io/react-inline-grid)\n\n**A predictable gird layout based on flexbox for [React](https://facebook.github.io/react/) applications using inline styles.**\n\n[![npm version](https://img.shields.io/npm/v/react-inline-grid.svg?style=flat-square)](https://www.npmjs.com/package/react-inline-grid)\n\n## Install\n`npm install react-inline-grid --save`\n\n## API\n\n### Sample Usage\n\n```js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { Grid, Row, Cell } from 'react-inline-grid';\n\nconst Layout = React.createClass({\n  render() {\n    return (\n      \u003cGrid\u003e\n        \u003cRow is=\"center\"\u003e\n          \u003cCell is=\"3 tablet-4 phone-4\"\u003e\u003cdiv\u003econtent_a\u003c/div\u003e\u003c/Cell\u003e\n          \u003cCell is=\"3 tablet-4 phone-4\"\u003e\u003cdiv\u003econtent_b\u003c/div\u003e\u003c/Cell\u003e\n        \u003c/Row\u003e\n      \u003c/Grid\u003e\n    );\n  }\n});\n\nReactDOM.render(\u003cLayout /\u003e, document.body);\n```\nThe library exports `Grid`, `Row` and `Cell`.\n\n### \u0026lt;Grid /\u003e\nGrid wrap inner components with [React Redux](https://github.com/rackt/react-redux#provider-store) `\u003cProvider\u003e`. \n\nUsing [Redux](https://github.com/rackt/redux), Grid's inner components can react to store update. Here Redux is used to handle [MediaQueryList](https://developer.mozilla.org/en/docs/Web/API/MediaQueryList) changes and update components `style` property:\n\n```js\n// phone\n\u003cdiv style=\"...; width: calc(100% - 16px);\"\u003e\u003cdiv\u003e\n\n// tablet\n\u003cdiv style=\"...; width: calc(50% - 16px);\"\u003e\u003cdiv\u003e\n\n// desktop\n\u003cdiv style=\"...; width: calc(25% - 16px);\"\u003e\u003cdiv\u003e\n```\n\nGrid exposes the property `options` allowing you to define custom grid settings.\n\n`options` shape:\n\n```js\n{\n  columns: number     // default = 12     - Columns size for the bigger media.\n  gutter: number      // default = 16     - Gutter size in pixel.\n  margin: number      // default = 16     - Margin size in pixel.\n  deaf: bool          // default = false  - Ignore MediaQueryList updates.\n  list: [             // default = [...]  - List of target media.\n    { \n      name: string    // required                     - Media name.\n      query: string   // required                     - Media query to test.\n      gutter: number  // default = options -\u003e gutter  - Media gutter size in pixel.\n      margin: number  // default = options -\u003e margin  - Media margin size in pixel.\n    }\n  ]\n}\n```\n\nIf `options` is not provided, or invalid, it will be fixed to apply values inspired by [Google Material Design Lite](http://www.getmdl.io/) grid layout:\n\n```js\n// options -\u003e list\n[\n  {\n    name: 'phone',\n    gutter: 16,\n    margin: 16,\n    columns: 4,\n    query: '(max-width: 479px)'\n  },\n  {\n    name: 'tablet',\n    gutter: 16,\n    margin: 16,\n    columns: 8,\n    query: '(min-width: 480px) and (max-width: 839px)'\n  },\n  {\n    name: 'desktop',\n    gutter: 16,\n    margin: 16,\n    columns: 12,\n    query: '(min-width: 840px)'\n  }\n]\n```\n\nIf no media match the queries, Grid will define the first `options -\u003e list -\u003e value` as default current media in order to match the \"popular\" mobile first approch.\n\n### \u0026lt;Row /\u003e\n\nExposes the property `is` (string) to update the following default style object:\n\n```js\n{\n  display: 'flex',\n  flexFlow: 'row wrap',\n  alignItems: 'stretch'\n}\n```\n`is` specify the `justify-content` style property as:\n- `start`\n- `center`\n- `end`\n- `around`\n- `between`\n\n```js\n\u003cRow is=\"center phone-end\"\u003e\n  \u003cCell\u003e\n    \u003cdiv\u003eContent\u003c/div\u003e\n  \u003c/Cell\u003e\n\u003c/Row\u003e\n\n// not phone\n\u003cdiv style=\"...; justify-content:center;\"\u003e\n  \u003cCell\u003e\n    \u003cdiv\u003eContent\u003c/div\u003e\n  \u003c/Cell\u003e\n\u003c/div\u003e\n\n// phone\n\u003cdiv style=\"...; justify-content:flex-end;\"\u003e\n  \u003cCell\u003e\n    \u003cdiv\u003eContent\u003c/div\u003e\n  \u003c/Cell\u003e\n\u003c/div\u003e\n\n```\n\n### \u0026lt;Cell /\u003e\n\nExposes the property `is` (string) to update the following default style object:\n\n```js\n{\n  boxSizing: 'border-box'\n}\n```\n`is` specify cell size and `align-self` style property as:\n- `\u003cvalue\u003e`\n- `\u003cmedia name?\u003e-\u003cvalue\u003e`\n- `\u003cmedia name?\u003e-offset-\u003cvalue\u003e`\n- `top`\n- `middle`\n- `bottom`\n- `stretch`\n\n```js\n\u003cRow\u003e\n  \u003cCell is=\"middle 4 tablet-2 offset-1\"\u003e\n    \u003cdiv\u003eContent\u003c/div\u003e\n  \u003c/Cell\u003e\n\u003c/Row\u003e\n\n// desktop\n\u003cRow\u003e\n  \u003cdiv style=\"...; width:calc(33.33...% - 16px);align-self:center;margin-left:calc(8.33...% - 8px);\"\u003e\n    \u003cdiv\u003eContent\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/Row\u003e\n\n// tablet\n\u003cRow\u003e\n  \u003cdiv style=\"...; width:calc(12.5% - 16px);align-self:center;margin-left:calc(25% - 8px);\"\u003e\n    \u003cdiv\u003eContent\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/Row\u003e\n\n// phone\n\u003cRow\u003e\n  \u003cdiv style=\"...; width:calc(25% - 16px);align-self:center;margin-left:calc(100% - 8px);\"\u003e\n    \u003cdiv\u003eContent\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/Row\u003e\n```\n\nFor both `\u003cRow /\u003e` and `\u003cCell /\u003e`, `is` property ask for an \"already defined\" values, the last one is used:\n\n```js\n\u003cCell is=\"3 2 1\"\u003e\n  \u003cdiv\u003eContent\u003c/div\u003e\n\u003c/Cell\u003e\n\n// will be defined as\n\n\u003cCell is=\"1\"\u003e\n  \u003cdiv\u003eContent\u003c/div\u003e\n\u003c/Cell\u003e\n```\n\n## Examples\n\nThe [gh-pages](http://broucz.github.io/react-inline-grid/) page of this repository use some patterns as examples, but feel free to play and test your layouts using the `examples` folder.\n\nRun the gh-pages example:\n\n```\ngit clone https://github.com/broucz/react-inline-grid.git\n\ncd react-inline-grid\nnpm install\n\ncd examples/react-transform-boilerplate\nnpm install\n\nnpm start\nopen http://localhost:3000/\n```\n\n## Thanks\n\n* [Redux](https://github.com/rackt/redux) I learned a lot from package evolution, author [@gaearon](https://github.com/gaearon), contributors, and related discussions.\n* [React](https://facebook.github.io/react) for the fun.\n* [React Redux](https://github.com/rackt/react-redux) to make it easier.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbroucz%2Freact-inline-grid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbroucz%2Freact-inline-grid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbroucz%2Freact-inline-grid/lists"}