{"id":23843401,"url":"https://github.com/jonathanconway/react-layout-wrappers","last_synced_at":"2026-04-15T07:39:42.901Z","repository":{"id":57333761,"uuid":"159944466","full_name":"jonathanconway/react-layout-wrappers","owner":"jonathanconway","description":"Layout wrappers for React 🎁","archived":false,"fork":false,"pushed_at":"2018-12-29T22:38:24.000Z","size":272,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-03-14T17:59:40.353Z","etag":null,"topics":["flexbox","layout","react","reactjs"],"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/jonathanconway.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-12-01T12:55:19.000Z","updated_at":"2021-03-17T12:44:58.000Z","dependencies_parsed_at":"2022-08-24T21:40:51.157Z","dependency_job_id":null,"html_url":"https://github.com/jonathanconway/react-layout-wrappers","commit_stats":null,"previous_names":["jonathanconway/reactlayout"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jonathanconway/react-layout-wrappers","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonathanconway%2Freact-layout-wrappers","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonathanconway%2Freact-layout-wrappers/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonathanconway%2Freact-layout-wrappers/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonathanconway%2Freact-layout-wrappers/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jonathanconway","download_url":"https://codeload.github.com/jonathanconway/react-layout-wrappers/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonathanconway%2Freact-layout-wrappers/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31831849,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-15T07:17:56.427Z","status":"ssl_error","status_checked_at":"2026-04-15T07:17:30.007Z","response_time":63,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["flexbox","layout","react","reactjs"],"created_at":"2025-01-02T19:28:29.923Z","updated_at":"2026-04-15T07:39:42.864Z","avatar_url":"https://github.com/jonathanconway.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Layout Wrappers\n\n\u003cimg src=\"https://i.imgur.com/rg2jv9n.png\" alt=\"React Layout logo\" style=\"width:80px;\"/\u003e\n\n[![license](https://badgen.now.sh/badge/license/MIT)](./LICENSE)\n\nA small collection of wrappers for implementing layout in your React application.\n\nInspired by Microsoft's WPF layout components.\n\nThe wrappers:\n\n* [Stack](#stack)\n* [Wrap](#wrap)\n* [Dock](#dock)\n* [Grid](#grid)\n* [Canvas](#canvas)\n* [UniformGrid](#uniform-grid)\n\n# Overview\n\nWhen you start putting together a user interface, in any language or framework, one of the first things you'll need to do is lay out the elements. You'll need to position, size and space them in various configurations, depending on what works best for the interface you're trying to develop.\n\nReact Layout aims to be your one-stop-shop for laying our your UI components in React. It does this by providing a small number of flexible and composable 'wrapper' components, in which you can place your components (including other wrapper components), in order to declaratively specify their layout.\n\nThis is (hopefully) simpler and less tedious and repetitive than writing custom CSS (e.g. FlexBox) or attempting to fit some other layout system (e.g. Bootstrap) into your React app. These methods were suitable for the contexts they were being used in (web pages styled with HTML and CSS), but are not so suitable for building component-based web apps in React.\n\nIn React Layout, all the layout components are simply React components, so you can easily fit them in alongside whatever other React components you're using (or just standard DOM elements in React). You can look at your hierarchy of components and easily determine how they will be laid out.\n\n# Installation\n\nNPM:\n\n```\nnpm install --save react-layout-wrappers\n```\n\nYarn:\n\n```\nyarn add react-layout-wrappers\n```\n\n# Components\n\n## \u003ca name=\"stack\"\u003e\u003c/a\u003eStack\n\u003cbr /\u003e\n\u003cimg src=\"https://i.imgur.com/Rb8COhW.png\" alt=\"Stack icon\" /\u003e\n\n### Overview\n\nStack is a container that stacks its children next to each other, one after another.\n\n### Props\n\n#### `orientation: 'horizontal' | 'vertical'`\n\n* `vertical` (default) Lays out the children vertically\n* `horizontal` Lays out the children horizontally\n\n#### `direction: 'left-to-right' | 'right-to-left'`\n\n* `left-to-right` Lays out the components in order, from left to right (if horizontal) or from top to bottom (if vertical)\n* `right-to-left` Reverse of the above; right to left (if horizontal) or bottom to top (if vertical)\n\n#### `children: StackChild[]`\n\nAn array of StackChild elements to be rendered inside the Stack.\n\n\n### Example\n\n```jsx\nimport React from 'react';\nimport { Stack } from 'react-layout-wrappers';\n\nconst StackExample = () =\u003e (\n  \u003cStack\u003e\n    \u003cStackChild\u003e\n      \u003ch1\u003eHeading\u003c/h1\u003e\n    \u003c/StackChild\u003e\n    \u003cStackChild\u003e\n      \u003cp\u003eParagraph\u003c/p\u003e\n    \u003c/StackChild\u003e\n    \u003cStackChild\u003e\n      \u003cbutton\u003eButton\u003c/button\u003e\n    \u003c/StackChild\u003e\n  \u003c/Stack\u003e\n);\n```\n\n\u003cimg src=\"https://i.imgur.com/TBE3qOx.png\" alt=\"Stack example screenshot\" /\u003e\n\n\n## \u003ca name=\"wrap\"\u003e\u003c/a\u003eWrap\n\n\u003cbr /\u003e\n\u003cimg src=\"https://i.imgur.com/WXrjA52.png\" alt=\"Wrap icon\" /\u003e\n\n### Overview\n\nWrap is a container in which children appear next to each other, one after another. When they get to the end, it starts a new row or column.\n\n### Props\n\n#### `orientation: 'horizontal' | 'vertical'`\n\n* `horizontal` (default) Lays out the children horizontally / length-wise.\n* `vertical` Lays out the children vertically / height-wise.\n\n#### `direction: 'left-to-right' | 'right-to-left'`\n\n* `left-to-right` Lays out the components in order, from left to right (if horizontal) or from top to bottom (if vertical)\n* `right-to-left` Reverse of the above; right to left (if horizontal) or bottom to top (if vertical)\n \n#### `children: WrapChild[]`\n\nAn array of WrapChild elements to be rendered inside the Wrap.\n\n\n### Example\n\n```jsx\nimport React from 'react';\nimport { Wrap } from 'react-layout-wrappers';\n\nconst WrapExample = () =\u003e (\n  \u003cWrap style={{ width: '200px' }}\u003e\n    {Array(7).fill(null).map((_, i) =\u003e\n      \u003cWrapChild\u003e\n        \u003cspan\u003eTag {i + 1}\u003c/span\u003e\n      \u003c/WrapChild\u003e\n    )}\n  \u003c/Wrap\u003e\n);\n```\n\n\u003cimg src=\"https://i.imgur.com/ZBmoK7N.png\" alt=\"Wrap example screenshot\" /\u003e\n\n\n## \u003ca name=\"dock\"\u003e\u003c/a\u003eDock\n\n\u003cbr /\u003e\n\u003cimg src=\"https://i.imgur.com/OZB1Qf2.png\" alt=\"Dock icon\" /\u003e\n\n### Overview\n\nDock is a container in which each child gravitates to one of its four edges.\n\n### Props\n\n#### `lastChildFill: boolean`\n\nIf true, makes the last DockChild in `children` fill all of the remaining space.\n\n#### `children: DockChild[]`\n\nAn array of DockChild elements to be rendered inside the Dock.\n\nEach DockChild can be given props, to define where it sits in the Dock.\n\n* `dock: 'top' | 'right' | 'bottom' | 'left'` Which edge of the Dock to pull the element toward.\n\n\n### Example\n\n```jsx\nimport React from 'react';\nimport { Dock } from 'react-layout-wrappers';\n\nconst DockExample = () =\u003e (\n  \u003cDock style={{ height: '100px' }} lastChildFill={true}\u003e\n    \u003cDockChild dock=\"top\"\u003e\n      \u003cbutton\u003eOne\u003c/button\u003e\n    \u003c/DockChild\u003e\n    \u003cDockChild dock=\"left\"\u003e\n      \u003cbutton\u003eTwo\u003c/button\u003e\n    \u003c/DockChild\u003e\n    \u003cDockChild dock=\"right\"\u003e\n      \u003cbutton\u003eThree\u003c/button\u003e\n    \u003c/DockChild\u003e\n    \u003cDockChild dock=\"right\"\u003e\n      \u003cbutton\u003eFour\u003c/button\u003e\n    \u003c/DockChild\u003e\n    \u003cDockChild dock=\"bottom\"\u003e\n      \u003cbutton\u003eFive\u003c/button\u003e\n    \u003c/DockChild\u003e\n  \u003c/Dock\u003e\n);\n```\n\n\u003cimg src=\"https://i.imgur.com/Y9v73jk.png\" alt=\"Dock example screenshot\" /\u003e\n\n\n## \u003ca name=\"grid\"\u003e\u003c/a\u003eGrid\n\n\u003cbr /\u003e\n\u003cimg src=\"https://i.imgur.com/nNxRYj8.png\" alt=\"Grid icon\" /\u003e\n\n### Overview\n\nGrid is a container that slots its children into cells, defined by rows and columns.\n\n### Props\n\n#### `rowDefinitions: [{ height }]`\n\nDefines how many rows are in the grid (the number of elements in the array) and settings for each individual row:\n\n* `height: number` (optional) Defines the height of each row.\n\n#### `columnDefinitions: [{ width }]`\n\nDefines how many columns are in the grid (the number of elements in the array) and settings for each individual column:\n\n* `width: number` (optional) Defines the width of each column.\n\n#### `children: GridChild[]`\n\nAn array of GridChild elements to be rendered inside the Grid.\n\nEach GridChild can be given props, to define where and how it sits in the Grid.\n\n* `gridRow: number` (optional) Which row to position the element in  (1-based).\n* `gridColumn: number` (optional) Which column to position the element in  (1-based).\n* `gridRowSpan: number` (optional) How many rows the element takes up (defaults to 1).\n* `gridColumnSpan: number` (optional) How many columns the element takes up (defaults to 1).\n\n\n### Example\n\n```jsx\nimport React from 'react';\nimport { Grid } from 'react-layout-wrappers';\n\nconst GridExamples = () =\u003e (\n  \u003cdiv\u003e\n    \u003cGrid\n      rowDefinitions={[{}, {}, {}, {}]}\n      columnDefinitions={[{}, {}, {}, {}]}\n    \u003e\n      \u003cGridChild gridRow={1} gridColumn={1}\u003e\n        \u003cbutton\u003eBtn 1\u003c/button\u003e\n      \u003c/GridChild\u003e\n      \u003cGridChild gridRow={2} gridColumn={2}\u003e\n        \u003cbutton\u003eBtn 2\u003c/button\u003e\n      \u003c/GridChild\u003e\n      \u003cGridChild gridRow={3} gridColumn={3}\u003e\n        \u003cbutton\u003eBtn 3\u003c/button\u003e\n      \u003c/GridChild\u003e\n      \u003cGridChild gridRow={4} gridColumn={4}\u003e\n        \u003cbutton\u003eBtn 4\u003c/button\u003e\n      \u003c/GridChild\u003e\n    \u003c/Grid\u003e\n\n    \u003cGrid\n      rowDefinitions={[{}, {}, {}, {}]}\n      columnDefinitions={[{}, {}, {}, {}]}\n    \u003e\n      \u003cGridChild gridRow={1} gridColumn={1} gridColumnSpan={2}\u003e\n        \u003cbutton\u003eBtn 1\u003c/button\u003e\n      \u003c/GridChild\u003e\n      \u003cGridChild gridRow={2} gridColumn={2} gridRowSpan={2}\u003e\n        \u003cbutton\u003eBtn 2\u003c/button\u003e\n      \u003c/GridChild\u003e\n      \u003cGridChild gridRow={3} gridColumn={3} gridRowSpan={2} gridColumnSpan={2}\u003e\n        \u003cbutton\u003eBtn 3\u003c/button\u003e\n      \u003c/GridChild\u003e\n    \u003c/Grid\u003e\n\n    \u003cGrid\n      rowDefinitions={[{ height: 40 }, { height: 60 }, { height: 80 }, { height: 100 }]}\n      columnDefinitions={[{ width: 60 }, { width: 80 }, { width: 100 }, { width: 120 }]}\n    \u003e\n      \u003cGridChild gridRow={1} gridColumn={1}\u003e\n        \u003cbutton\u003eBtn 1\u003c/button\u003e\n      \u003c/GridChild\u003e\n      \u003cGridChild gridRow={2} gridColumn={2}\u003e\n        \u003cbutton\u003eBtn 2\u003c/button\u003e\n      \u003c/GridChild\u003e\n      \u003cGridChild gridRow={3} gridColumn={3}\u003e\n        \u003cbutton\u003eBtn 3\u003c/button\u003e\n      \u003c/GridChild\u003e\n      \u003cGridChild gridRow={4} gridColumn={4}\u003e\n        \u003cbutton\u003eBtn 4\u003c/button\u003e\n      \u003c/GridChild\u003e\n    \u003c/Grid\u003e\n  \u003c/div\u003e\n);\n```\n\n\u003cimg src=\"https://i.imgur.com/JIhHJth.png\" alt=\"Grid example screenshot\" /\u003e\n\n\n## \u003ca name=\"canvas\"\u003e\u003c/a\u003eCanvas\n\n\u003cbr /\u003e\n\u003cimg src=\"https://i.imgur.com/p7sBUHZ.png\" alt=\"Canvas icon\" /\u003e\n\n### Overview\n\nCanvas is a container that lets you place its children at co-ordinates on a 2D plane.\n\n### Props\n\n#### `children: CanvasChild[]`\n\nAn array of CanvasChild elements to be rendered inside the Canvas.\n\nEach CanvasChild can be given props, to define where and how it sits on the Canvas.\n\n* `canvasTop: number | string` (optional) Top position of the element. 0 means the very top, greater means farther from the top and closer to the bottom.\n* `canvasRight: number | string` (optional) Right position of the element. 0 means the very right, greater means farther from the right and closer to the left.\n* `canvasBottom: number | string` (optional) Bottom position of the element. 0 means the very bottom, greater means farther from the bottom and closer to the top.\n* `canvasLeft: number | string` (optional) Left position of the element. 0 means the very left, greater means farther from the left and closer to the right.\n* `canvasZIndex: number` (optional) Position of the element on the Z-Index (that is, order of overlapping, where part or all of the element overlaps with other elements). Greater means closer to the front, relative to the Z-Index of other elements. Lesser means farther to the back.\n\n\n### Example\n\n```jsx\nimport React from 'react';\nimport { Canvas } from 'react-layout-wrappers';\n\nconst CanvasExample = () =\u003e (\n  \u003cCanvas style={{ height: '200px' }}\u003e\n    \u003cCanvasChild canvasTop={20} canvasLeft={20}\u003e\n      \u003cbutton\u003eBtn 1\u003c/button\u003e\n    \u003c/CanvasChild\u003e\n    \u003cCanvasChild canvasTop={20} canvasRight={20}\u003e\n      \u003cbutton\u003eBtn 2\u003c/button\u003e\n    \u003c/CanvasChild\u003e\n    \u003cCanvasChild canvasBottom={20} canvasRight={20}\u003e\n      \u003cbutton\u003eBtn 3\u003c/button\u003e\n    \u003c/CanvasChild\u003e\n    \u003cCanvasChild canvasBottom={20} canvasLeft={20}\u003e\n      \u003cbutton\u003eBtn 4\u003c/button\u003e\n    \u003c/CanvasChild\u003e\n    \u003cCanvasChild canvasTop={80} canvasLeft={80} canvasZIndex={1}\u003e\n      \u003cbutton\u003eBtn 5\u003c/button\u003e\n    \u003c/CanvasChild\u003e\n    \u003cCanvasChild canvasTop={90} canvasLeft={90}\u003e\n      \u003cbutton\u003eBtn 6\u003c/button\u003e\n    \u003c/CanvasChild\u003e\n  \u003c/Canvas\u003e\n);\n```\n\n\u003cimg src=\"https://i.imgur.com/R0PbFqT.png\" alt=\"Canvas example screenshot\" /\u003e\n\n\n## \u003ca name=\"uniform-grid\"\u003e\u003c/a\u003eUniformGrid\n\n\u003cbr /\u003e\n\u003cimg src=\"https://i.imgur.com/R1X4BEf.png\" alt=\"UniformGrid icon\" /\u003e\n\n### Overview\n\nUniformGrid is a container that slots its children into cells, defined by rows and columns. It is like [Grid](#grid), except that it just renders its children onto the grid in the order they are passed, rather than allowing you to set each individual's location independently.\n\n#### `rows: number`\n\nNumber of rows in the grid.\n\n#### `columns: number`\n\nNumber of columns in the grid.\n\n#### `children: UniformGridChild[]`\n\nAn array of UniformGridChild elements to be rendered inside the UniformGrid.\n\n\n### Example\n\n```jsx\nimport React from 'react';\nimport { UniformGrid } from 'react-layout-wrappers';\n\nconst UniformGridExample = () =\u003e (\n  \u003cUniformGrid rows={2} columns={4}\u003e\n    {Array(8).fill(null).map((_, i) =\u003e\n      \u003cUniformGridChild\u003e\n        \u003cspan\u003eItem {i + 1}\u003c/span\u003e\n      \u003c/UniformGridChild\u003e\n    )}\n  \u003c/UniformGrid\u003e\n);\n```\n\n\u003cimg src=\"https://i.imgur.com/pOb36Eu.png\" alt=\"UniformGrid example screenshot\" /\u003e\n\n\n# Resources\n\n## Books\n\n* [Illustrated WPF (Daniel Solis, 2009)](https://www.amazon.com/Illustrated-WPF-Experts-Voice-NET/dp/1430219106)\n\n\n---\n\nCopyright \u0026copy; 2018\n\nJonathan Conway\n\nMIT License.\n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjonathanconway%2Freact-layout-wrappers","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjonathanconway%2Freact-layout-wrappers","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjonathanconway%2Freact-layout-wrappers/lists"}