{"id":13836713,"url":"https://github.com/jsdf/react-layout","last_synced_at":"2025-03-16T21:30:38.049Z","repository":{"id":19337719,"uuid":"22576619","full_name":"jsdf/react-layout","owner":"jsdf","description":"Dynamic subview layout for React","archived":false,"fork":false,"pushed_at":"2016-03-01T22:00:46.000Z","size":20,"stargazers_count":83,"open_issues_count":6,"forks_count":9,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-03-15T04:55:49.622Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CoffeeScript","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/jsdf.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":"2014-08-03T14:36:37.000Z","updated_at":"2023-09-08T16:49:31.000Z","dependencies_parsed_at":"2022-08-28T07:51:22.179Z","dependency_job_id":null,"html_url":"https://github.com/jsdf/react-layout","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsdf%2Freact-layout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsdf%2Freact-layout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsdf%2Freact-layout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsdf%2Freact-layout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jsdf","download_url":"https://codeload.github.com/jsdf/react-layout/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243685561,"owners_count":20330982,"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-08-04T15:00:52.949Z","updated_at":"2025-03-16T21:30:37.756Z","avatar_url":"https://github.com/jsdf.png","language":"CoffeeScript","funding_links":[],"categories":["Awesome React","CoffeeScript"],"sub_categories":["Tools"],"readme":"# React Layout\n\nDynamic subview layout for [React](http://facebook.github.io/react/)\n\nDefine layout of nested views with fixed and flexible dimensions in a declarative manner.\n\nWhy? If you still have to support IE9 and below, flexbox is off the table. However, flexibly sized elements are necessary for many complex layouts.\n\n### Example\n```js\nvar React = require('react')\nvar Layout = require('react-layout')\nvar AppViews = require('./app-views')\n\nvar AppLayout = React.createClass({\n  getInitialState: function() {\n    // a resizable sidebar could be implemented by updating this value\n    return {sidebarWidth: 330}\n  },\n  render: function() {\n    var scrollable = {\n      'overflow-y': 'scroll',\n      'overflow-x': 'hidden',\n    }\n\n    return (\n      \u003cLayout layoutWidth={this.props.width} layoutHeight={this.props.height}\u003e\n        \u003cLayout className=\"sidebar\" layoutWidth={this.state.sidebarWidth}\u003e\n          \u003cAppViews.Sidebar /\u003e\n        \u003c/Layout\u003e\n        \u003cLayout className=\"main\" layoutWidth=\"flex\" style={scrollable}\u003e\n          \u003cAppViews.Main /\u003e\n        \u003c/Layout\u003e\n      \u003c/Layout\u003e\n    )\n  },\n})\n\nfunction render() {\n  var appView = (\n    \u003cAppLayout\n      width={window.innerWidth}\n      height={window.innerHeight}\n    /\u003e\n  )\n  React.render(appView, document.body)\n}\n\nwindow.addEventListener('resize', render)\n\nrender()\n```\n\nThis example implements a two-panel app layout with a sidebar and main viewport.\nThe sidebar gets its width from a state value and the main view fills the\nremaining width.\n\nWhen the window is resized, the app is rerendered and the new window dimensions\nflow down the layout hierarchy.\n\n### API\n\nThe `Layout` component provided by this module can be parametised with the props\n`layoutWidth` and `layoutHeight`, both which take a `layoutDef` value, which can\nbe any of the following:\n- numeric pixel value eg. `layoutHeight={100}`: will apply a fixed size in pixels \n  for that dimension\n- `\"flex\"`: will fill the remaining space left by fixed size sibling `Layout`\n  elements  components taking part in layout for that dimension. If there are\n  multiple 'flex' components, they will share the available space evenly.\n- `\"omit\"`: the element will not be given any size value for this dimension\n\nIf no `layoutDef` value is provided for a particular dimension, the `Layout`\ncomponent will inherit the size for that dimension from the parent component\n(or the closest parent `Layout` component) as a fixed size.\n\nOther props:\n\n- `component`: a React component class to use for the layout element (defaults to `div`)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsdf%2Freact-layout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjsdf%2Freact-layout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsdf%2Freact-layout/lists"}