{"id":13525239,"url":"https://download.github.io/preact-layout/","last_synced_at":"2025-04-01T04:31:30.822Z","repository":{"id":57329505,"uuid":"69346385","full_name":"Download/preact-layout","owner":"Download","description":"Small and simple layout library for Preact 　 　 　:triangular_ruler: ","archived":false,"fork":false,"pushed_at":"2023-06-09T19:03:55.000Z","size":675,"stargazers_count":24,"open_issues_count":6,"forks_count":6,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-20T02:49:35.724Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://download.github.io/preact-layout/","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/Download.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"docs/contributing-guide/README.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-09-27T10:42:28.000Z","updated_at":"2024-06-14T05:04:13.000Z","dependencies_parsed_at":"2024-01-11T14:26:49.593Z","dependency_job_id":null,"html_url":"https://github.com/Download/preact-layout","commit_stats":{"total_commits":26,"total_committers":3,"mean_commits":8.666666666666666,"dds":"0.11538461538461542","last_synced_commit":"e4bd240373bcffc7108fc73156f1213629216a0d"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Download%2Fpreact-layout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Download%2Fpreact-layout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Download%2Fpreact-layout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Download%2Fpreact-layout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Download","download_url":"https://codeload.github.com/Download/preact-layout/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222583896,"owners_count":17006691,"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-01T06:01:17.067Z","updated_at":"2024-11-02T09:30:54.600Z","avatar_url":"https://github.com/Download.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"# preact-layout\n#### Small and simple layout library for Preact.\n\n[![npm](https://img.shields.io/npm/v/preact-layout.svg)](https://npmjs.com/package/preact-layout)\n[![license](https://img.shields.io/npm/l/preact-layout.svg)](https://creativecommons.org/licenses/by/4.0/)\n[![travis](https://img.shields.io/travis/Download/preact-layout.svg)](https://travis-ci.org/Download/preact-layout)\n[![greenkeeper](https://img.shields.io/david/Download/preact-layout.svg)](https://greenkeeper.io/)\n![mind BLOWN](https://img.shields.io/badge/mind-BLOWN-ff69b4.svg)\n\n![preact layout](https://cdn.rawgit.com/download/preact-layout/0.2.0/preact-layout.png)\n\n### Think out of the box!\n\n\u0026nbsp; 　 　 　\n\n\u0026nbsp;\n 　 　 　\n\n[Preact](https://preactjs.com/) is beautiful and pure. Literally, because with\nPreact we mostly write pure components that take properties and render markup\npossibly including child components that we control via their props. Information\nflows one way and everything is good.\n\nBut what if a component needs to render some data in another section of the page?\nIn the header for example? Do we really have to make the root component aware of\nthe title of each page? What if we need something in the footer as well? Or in\nsome sidebar? We want our components to be able to contribute content to other\nsections of the page, even if those sections are higher up the tree...\nIs it even possible?\n\npreact-layout does not only make this possible, it makes it **simple**!\n\n## Getting Started\nGetting started with preact-layout:\n* Play with the [Preact Layout Kickstart](http://codepen.io/StijnDeWitt/pen/rrzJEA?editors=0010) CodePen.\n* [Setup](https://download.github.io/preact-layout/docs/getting-started/Setup.html) - Add preact-layout to your project\n* [Basic Usage](https://download.github.io/preact-layout/docs/getting-started/Basic-usage.html) - Using Layout, Section and contribution functions\n* [Examples](https://download.github.io/preact-layout/docs/getting-started/Examples.html) - Learn by example!\n\n## Why\nPreact Layout elegantly solves some common layout challenges you will undoubtedly\nencounter when using Preact, due to the hierarchical nature of the component\ntree and the one-way data flow. Preact Layout allows you to think out of the box.\n\n### Simple but powerful API\nWith just 2 components, the API is very simple to learn, yet powerful.\n* [Layout](docs/api/Layout.md) to define layouts\n* [Section](docs/api/Section.md) to divide the layout into multiple sections\n\n### Lightweight\npreact-layout is microscopically small. The sources are just over 2 Kb\nand the minified and gzipped distribution file weighs only 1 kB.\n\n### Well documented\nA good library needs plenty of good docs. In the case of preact-layout, the\ndocs are way bigger than the library itself! We have a\n[Usage guide](https://download.github.io/preact-layout/docs/getting-started/Basic-usage.html),\n[API docs](https://download.github.io/preact-layout/docs/api/),\n[Examples](https://download.github.io/preact-layout/docs/getting-started/Examples.html) and a\n[Preact Layout Kickstart CodePen](http://codepen.io/StijnDeWitt/pen/rrzJEA?editors=0010) to learn from.\n\n### Well tested\nGood tests ensure not only that the code works, but that it keeps working! We use [Travis\nCI](https://travis-ci.org/Download/preact-layout) to test every push to master so we\ncatch any bugs before they make it into a release.\n\n### Open Source, Open Community\npreact-layout is Open Source software with a\n[public code repository](https://github.com/download/preact-layout) and\n[public issue tracker](https://github.com/download/preact-layout/issues).\n\n## Using preact-layout\n* Define contribution functions\n* Create a layout\n* Use the contribution functions in your components\n* Nest the component inside the layout\n\n### Define contribution functions\npreact-layout allows you to define [contribution functions](https://download.github.io/preact-layout/docs/api/contribution-functions.html)\nthat are used as JSX tags that signal that the components contained in those tags\nshould be contributed to *another section* of the parent layout.\n\nFor example, for a simple layout with a header and a footer around some main\ncontent block, we might define these functions:\n\n```js\nfunction Header(){}\nfunction Footer(){}\n```\n\n### Create a layout\nCreate a layout with sections for the Header and Footer:\n\n```js\nfunction MyLayout({children}) {return (\n\t\u003cLayout\u003e\n\t\t\u003cdiv\u003e\n\t\t\t\u003cheader\u003e\n\t\t\t\t\u003cSection type={Header}\u003e\u003cb\u003eheader\u003c/b\u003e\u003c/Section\u003e\n\t\t\t\u003c/header\u003e\n\n\t\t\t\u003cSection\u003e{children}\u003c/Section\u003e\n\n\t\t\t\u003cfooter\u003e\n\t\t\t\t\u003cSection type={Footer}\u003e\u003ci\u003efooter\u003c/i\u003e\u003c/Section\u003e\n\t\t\t\u003c/footer\u003e\n\t\t\u003c/div\u003e\n\t\u003c/Layout\u003e\n)}\n```\n\n### Use the contribution functions in your components\nNow, we can build components that use the contribution functions to contribute\ncomponents to the related sections of the layout:\n\n```js\nfunction MyPage(){return (\n\t\u003cdiv\u003e\n\t\t\u003cHeader\u003e\u003ch1\u003emy page\u003c/h1\u003e\u003c/Header\u003e\n\t\t\u003carticle\u003emain article\u003c/article\u003e\n\t\t\u003cFooter\u003egoodbye\u003c/Footer\u003e\n\t\u003c/div\u003e\n)}\n```\n\n### Nest the component inside the layout\nFinally, render the component nested within the layout:\n\n```js\nrender(\n\t\u003cMyLayout\u003e\n\t\t\u003cMyPage /\u003e\n\t\u003c/MyLayout\u003e\n\t,\n\tdocument.getElementsByTagName('body')[0]\n)\n```\n\nThis will result in:\n\n```html\n\u003cdiv\u003e\n\t\u003cheader\u003e\n\t\t\u003ch1\u003emy page\u003c/h1\u003e\n\t\u003c/header\u003e\n\t\u003cdiv\u003e\n\t\t\u003carticle\u003emain article\u003c/article\u003e\n\t\u003c/div\u003e\n\t\u003cfooter\u003e\n\t\tgoodbye\n\t\u003c/footer\u003e\n\u003c/div\u003e\n```\nRead more in the [Usage Guide](https://download.github.io/preact-layout/docs/getting-started/Usage-guide.html).\n\n## Component Reference\n* [Layout](https://download.github.io/preact-layout/docs/api/Layout.html) - Create layouts using `Layout`\n* [Section](https://download.github.io/preact-layout/docs/api/Section.html) - Divide your layout into named `Section`s\n* [contribution functions](https://download.github.io/preact-layout/docs/api/contribution-functions.html) - Defining conribution functions\n\n## Performance considerations\nWhen collecting contributions, preact-layout peeks ahead at the elements that\nthe child components will produce by rendering those child components. The\nresulting elements could itself again contain components, which would need to\nbe rendered as well, leading to recursive rendering that of course comes at a\nperformance cost. You can tune this cost by setting the\n[recurse](https://download.github.io/preact-layout/docs/api/Layout.html#recurse)\nattribute on the `Layout` to some positive number. It defaults to `9`.\n\n## Issues\nAdd an issue in this project's [issue tracker](https://github.com/download/preact-layout/issues)\nto let me know of any problems you find, or questions you may have.\n\n## Contributing\nThis project welcomes contributions from the community! \nLearn more in the [contributing guide](https://download.github.io/preact-layout/docs/contributing-guide/).\n\n## Copyright\nCopyright 2016 by [Stijn de Witt](http://StijnDeWitt.com). Some rights reserved.\n\n## License\nLicensed under the [Creative Commons Attribution 4.0 International (CC-BY-4.0)](https://creativecommons.org/licenses/by/4.0/) Open Source license.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/download.github.io%2Fpreact-layout%2F","html_url":"https://awesome.ecosyste.ms/projects/download.github.io%2Fpreact-layout%2F","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/download.github.io%2Fpreact-layout%2F/lists"}