{"id":13400560,"url":"https://github.com/aeagle/react-spaces","last_synced_at":"2025-05-14T02:05:14.262Z","repository":{"id":35047677,"uuid":"198009735","full_name":"aeagle/react-spaces","owner":"aeagle","description":"React components that allow you to divide a page or container into nestable anchored, scrollable and resizable spaces.","archived":false,"fork":false,"pushed_at":"2025-03-13T17:07:36.000Z","size":8576,"stargazers_count":1309,"open_issues_count":22,"forks_count":26,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-05-10T20:46:24.520Z","etag":null,"topics":["component-library","components","javascript-library","react","reactjs","reactjs-components","web","web-ui","web-ui-framework"],"latest_commit_sha":null,"homepage":"https://allaneagle.com/projects/react-spaces","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/aeagle.png","metadata":{"files":{"readme":"README.md","changelog":"changelog.md","contributing":null,"funding":".GitHub/FUNDING.yml","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,"zenodo":null},"funding":{"github":"aeagle"}},"created_at":"2019-07-21T03:58:06.000Z","updated_at":"2025-04-21T10:52:49.000Z","dependencies_parsed_at":"2024-01-10T22:43:08.683Z","dependency_job_id":"e8643aee-a6b4-4f14-9c25-e9b5a8f2b2f4","html_url":"https://github.com/aeagle/react-spaces","commit_stats":null,"previous_names":[],"tags_count":76,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aeagle%2Freact-spaces","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aeagle%2Freact-spaces/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aeagle%2Freact-spaces/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aeagle%2Freact-spaces/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aeagle","download_url":"https://codeload.github.com/aeagle/react-spaces/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254052692,"owners_count":22006716,"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":["component-library","components","javascript-library","react","reactjs","reactjs-components","web","web-ui","web-ui-framework"],"created_at":"2024-07-30T19:00:53.315Z","updated_at":"2025-05-14T02:05:08.969Z","avatar_url":"https://github.com/aeagle.png","language":"TypeScript","readme":"# React Spaces\n\n![NPM](https://img.shields.io/npm/v/react-spaces.svg) ![Azure Pipelines](https://allan-eagle.visualstudio.com/All%20projects/_apis/build/status/aeagle.react-spaces?branchName=master)\n\nAn easy to understand and nestable layout system, React Spaces allow you to divide a page or container into anchored, scrollable and resizable spaces enabling you to build desktop/mobile type user interfaces in the browser.\n\nRather than a library of visual UI components, Spaces are intended to be the reusable foundational blocks for laying out a UI which responds neatly to view port resizes leaving you to fill them with whatever components you want.\n\n-   No styling to achieve simple or complex layouts.\n-   Spaces know how to behave in relation to each other and resize accordingly.\n-   Spaces don't have any visual element to them (even padding or margins). You can fill them with whatever you want.\n\n**Version 0.2.0 release - read [release notes here](https://www.allaneagle.com/react-spaces/release-0.2.0).**\n\nView full documentation [here](https://www.allaneagle.com/react-spaces/demo/).\n\n\u003cimg src=\"https://www.allaneagle.com/react-spaces/react-spaces-demo.gif\" width=\"100%\" /\u003e\n\n### Top level spaces\n\nUsed at the top level of all other spaces.\n\n**\\\u003cViewPort \\/\u003e**\n\nThis space will take over the full viewport of the browser window. Resizing the browser window will automatically adjust the size of this space and all the nested spaces.\n\n**\\\u003cFixed /\\\u003e**\n\nThis space can be given a height and optionally a width (by default it will size to 100% of it's container). All nested spaces will be contained within this fixed size space.\n\n### Anchored spaces\n\nThese can be used within the top-level spaces **\\\u003cViewPort /\\\u003e** and **\\\u003cFixed /\\\u003e** or nested within other spaces.\n\n**\\\u003cLeft /\\\u003e** and **\\\u003cRight /\\\u003e**\n\nA space anchored to the left or right of the parent container/space. A size can be specified in pixels or as a percentage to determine its width.\n\n**\\\u003cTop /\\\u003e** and **\\\u003cBottom /\\\u003e**\n\nA space anchored to the top or bottom of the parent container/space. A size can be specified in pixels or as a percentage to determine its height.\n\nThere are resizable versions of these components called **\\\u003cLeftResizable /\\\u003e**, **\\\u003cRightResizable /\\\u003e**, **\\\u003cTopResizable /\\\u003e** and **\\\u003cBottomResizable /\\\u003e** which allow the spaces to be resized from the outer edge by dragging with the mouse.\n\n### Other\n\n**\\\u003cFill /\\\u003e**\n\nA space which consumes any available area left in the parent container/space taking into account any anchored spaces on every side.\n\n**\\\u003cPositioned /\\\u003e**\n\nA space which can be absolutely placed within a parent space either by top, left, width and height or by top, left, right and bottom.\n\n**\\\u003cLayer /\\\u003e**\n\nLayers allow you to create layers within a parent space, for example:\n\n```html\n\u003cViewPort\u003e\n\t\u003cLayer zIndex=\"{0}\"\u003e \u003cLeftResizable size=\"20%\" /\u003e // floating sidebar \u003c/Layer\u003e\n\t\u003cLayer zIndex=\"{1}\"\u003e\n\t\t\u003cFill /\u003e\n\t\u003c/Layer\u003e\n\u003c/ViewPort\u003e\n```\n\n**\\\u003cCentered /\\\u003e**\n\nCentres the content of a space horizontally and vertically.\n\n**\\\u003cCenteredVertically /\\\u003e**\n\nCentres the content of a space vertically.\n\n## Getting started\n\nTo get started with React Spaces you need:\n\n```typescript\nnpm install react-spaces --save\n```\n\n```typescript\nimport * as Spaces from \"react-spaces\";\n```\n\nView full documentation [here](https://www.allaneagle.com/react-spaces/demo/).\n\n## Donation\n\nIf you find this library useful, consider making a small donation to fund a cup of coffee:\n\n\u003ca href=\"https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick\u0026hosted_button_id=AAYPWGUQBUDAA\" \n    title=\"If you find this library useful, consider making a small donation to fund a cup of coffee\" alt=\"Make Donation\" style=\"text-decoration: none;\"\u003e\n\u003cimg src=\"https://www.allaneagle.com/donation.png\" /\u003e\n\u003c/a\u003e\n","funding_links":["https://github.com/sponsors/aeagle","https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick\u0026hosted_button_id=AAYPWGUQBUDAA"],"categories":["TypeScript","UI Layout","Uncategorized","Layout","UI Components","React [🔝](#readme)"],"sub_categories":["Form Components","Uncategorized","Device Input/User Action"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faeagle%2Freact-spaces","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faeagle%2Freact-spaces","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faeagle%2Freact-spaces/lists"}