{"id":33211592,"url":"https://github.com/ekros/nice-react-layout","last_synced_at":"2025-11-21T05:03:12.920Z","repository":{"id":28328613,"uuid":"118429145","full_name":"ekros/nice-react-layout","owner":"ekros","description":"Create complex and nice Flexbox-based layouts, without even knowing what flexbox means","archived":false,"fork":false,"pushed_at":"2023-02-09T17:59:55.000Z","size":3774,"stargazers_count":69,"open_issues_count":26,"forks_count":10,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-08-19T13:06:53.391Z","etag":null,"topics":["flexbox","layout","react","ui","ui-components"],"latest_commit_sha":null,"homepage":null,"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/ekros.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-01-22T08:36:39.000Z","updated_at":"2024-12-19T08:30:34.000Z","dependencies_parsed_at":"2024-06-19T05:14:14.248Z","dependency_job_id":"da014b22-5c82-4f1b-945f-08fc755766f8","html_url":"https://github.com/ekros/nice-react-layout","commit_stats":{"total_commits":90,"total_committers":6,"mean_commits":15.0,"dds":"0.37777777777777777","last_synced_commit":"4d208b018fa4d6806a91f4a1f42eb1e94f806be1"},"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"purl":"pkg:github/ekros/nice-react-layout","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ekros%2Fnice-react-layout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ekros%2Fnice-react-layout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ekros%2Fnice-react-layout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ekros%2Fnice-react-layout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ekros","download_url":"https://codeload.github.com/ekros/nice-react-layout/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ekros%2Fnice-react-layout/sbom","scorecard":{"id":370852,"data":{"date":"2025-08-11","repo":{"name":"github.com/ekros/nice-react-layout","commit":"4d208b018fa4d6806a91f4a1f42eb1e94f806be1"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":1.7,"checks":[{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Code-Review","score":0,"reason":"Found 0/19 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 13 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"160 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-6chw-6frg-f759","Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw","Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-rvg8-pwq2-xj7q","Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx","Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw","Warn: Project is vulnerable to: GHSA-c6rq-rjc2-86v2","Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h","Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-rq8g-5pc5-wrhr","Warn: Project is vulnerable to: GHSA-p28h-cc7q-c4fg","Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-3wcq-x3mq-6r9p","Warn: Project is vulnerable to: GHSA-ff7x-qrg7-qggm","Warn: Project is vulnerable to: GHSA-vh7m-p724-62c2","Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w","Warn: Project is vulnerable to: GHSA-434g-2637-qmqr","Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m","Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw","Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p","Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747","Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh","Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h","Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7","Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc","Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx","Warn: Project is vulnerable to: GHSA-qrmc-fj45-qfc2","Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q","Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c","Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc","Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3","Warn: Project is vulnerable to: MAL-2023-462","Warn: Project is vulnerable to: GHSA-8mmm-9v2q-x3f9","Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97","Warn: Project is vulnerable to: GHSA-q42p-pg8m-cqh6","Warn: Project is vulnerable to: GHSA-w457-6q6x-cgp9","Warn: Project is vulnerable to: GHSA-62gr-4qp9-h98f","Warn: Project is vulnerable to: GHSA-f52g-6jhx-586p","Warn: Project is vulnerable to: GHSA-2cf5-4w76-r9qv","Warn: Project is vulnerable to: GHSA-3cqr-58rm-57f8","Warn: Project is vulnerable to: GHSA-g9r4-xpmj-mj65","Warn: Project is vulnerable to: GHSA-q2c6-c6pm-g3gh","Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44","Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988","Warn: Project is vulnerable to: GHSA-44pw-h2cw-w3vq","Warn: Project is vulnerable to: GHSA-c429-5p7v-vgjp","Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj","Warn: Project is vulnerable to: GHSA-pfq8-rq6v-vf5m","Warn: Project is vulnerable to: GHSA-6x33-pw7p-hmpq","Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27","Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37","Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22","Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp","Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr","Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg","Warn: Project is vulnerable to: GHSA-2pr6-76vf-7546","Warn: Project is vulnerable to: GHSA-8j8c-7jfh-h6hx","Warn: Project is vulnerable to: GHSA-896r-f27r-55mw","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp","Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq","Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488","Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g","Warn: Project is vulnerable to: GHSA-4xc9-xhrj-v574","Warn: Project is vulnerable to: GHSA-x5rq-j2xg-h7qm","Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695","Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw","Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-pp57-mqmh-44h7","Warn: Project is vulnerable to: GHSA-4xcv-9jjx-gfj3","Warn: Project is vulnerable to: GHSA-f9cm-qmx5-m98h","Warn: Project is vulnerable to: GHSA-7wpw-2hjm-89gp","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g","Warn: Project is vulnerable to: GHSA-92xj-mqp7-vmcj","Warn: Project is vulnerable to: GHSA-wxgw-qj99-44c2","Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5","Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp","Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq","Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr","Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765","Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g","Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p","Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr","Warn: Project is vulnerable to: GHSA-76c9-3jph-rj3q","Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9","Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j","Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w","Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6","Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59","Warn: Project is vulnerable to: GHSA-566m-qj78-rww5","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-hxcm-v35h-mg2x","Warn: Project is vulnerable to: GHSA-29gp-92wp-94q8","Warn: Project is vulnerable to: GHSA-5q6m-3h65-w53x","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg","Warn: Project is vulnerable to: GHSA-h9rv-jmmf-4pgx","Warn: Project is vulnerable to: GHSA-hxcc-f52p-wc94","Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p","Warn: Project is vulnerable to: GHSA-4g88-fppr-53pp","Warn: Project is vulnerable to: GHSA-4jqc-8m5r-9rpr","Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7","Warn: Project is vulnerable to: GHSA-c9g6-9335-x697","Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq","Warn: Project is vulnerable to: GHSA-mf6x-7mm4-x2g7","Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9","Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw","Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc","Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh","Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p","Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v","Warn: Project is vulnerable to: GHSA-662x-fhqg-9p8v","Warn: Project is vulnerable to: GHSA-394c-5j6w-4xmx","Warn: Project is vulnerable to: GHSA-78cj-fxph-m83p","Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3","Warn: Project is vulnerable to: GHSA-cf4h-3jhx-xvhq","Warn: Project is vulnerable to: GHSA-3329-pjwv-fjpg","Warn: Project is vulnerable to: GHSA-p6j9-7xhc-rhwp","Warn: Project is vulnerable to: GHSA-89gv-h8wf-cg8r","Warn: Project is vulnerable to: GHSA-gcv8-gh4r-25x6","Warn: Project is vulnerable to: GHSA-gmv4-r438-p67f","Warn: Project is vulnerable to: GHSA-8h2f-7jc4-7m3m","Warn: Project is vulnerable to: GHSA-3vjf-82ff-p4r3","Warn: Project is vulnerable to: GHSA-g694-m8vq-gv9h","Warn: Project is vulnerable to: GHSA-pv4c-p2j5-38j4","Warn: Project is vulnerable to: GHSA-46c4-8wrp-j99v","Warn: Project is vulnerable to: GHSA-9m6j-fcg5-2442","Warn: Project is vulnerable to: GHSA-hh27-ffr2-f2jc","Warn: Project is vulnerable to: GHSA-rqff-837h-mm52","Warn: Project is vulnerable to: GHSA-8v38-pw62-9cw2","Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j","Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872","Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6","Warn: Project is vulnerable to: GHSA-cf66-xwfp-gvc4","Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v","Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h","Warn: Project is vulnerable to: GHSA-g78m-2chm-r7qv","Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh","Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-18T12:53:14.881Z","repository_id":28328613,"created_at":"2025-08-18T12:53:14.882Z","updated_at":"2025-08-18T12:53:14.882Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":285560056,"owners_count":27192467,"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","status":"online","status_checked_at":"2025-11-21T02:00:06.175Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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","ui","ui-components"],"created_at":"2025-11-16T12:00:19.706Z","updated_at":"2025-11-21T05:03:12.915Z","avatar_url":"https://github.com/ekros.png","language":"JavaScript","readme":"[![Stable Release](https://img.shields.io/npm/v/nice-react-layout.svg)](https://npm.im/nice-react-layout)\n![last commit](https://img.shields.io/github/last-commit/google/skia.svg)\n![license](https://img.shields.io/github/license/mashape/apistatus.svg)\n[![DeepScan grade](https://deepscan.io/api/projects/2670/branches/18301/badge/grade.svg)](https://deepscan.io/dashboard#view=project\u0026pid=2670\u0026bid=18301)\n\n# ![logo](public/logo.png) Nice React Layout\n\nA set of React components to create complex flexbox-based layouts without knowing what flexbox is.\n[https://ekros.github.io/nice-react-layout/](https://ekros.github.io/nice-react-layout/)\n\n## Installation\n\n```sh\nyarn add nice-react-layout\n```\n\n## Motivation\n\nThe aim of this project is to have a reduced set of components to create flexbox-based layouts abstracting the knowledge needed to understand how flexbox works. This library is very useful for web apps with lots of panels.\n\n## Features\n\n- Easy to learn: Just combine layouts and panels.\n- Create collapsible sidebars with ease.\n- Automagically colorize panels with random colors to speed-up prototyping.\n- Resizable panels. Just add separators to your layouts.\n- Swap panels position using Drag and drop!\n\n![Simple example](https://i.postimg.cc/W3gMfVCN/preview.gif)\n\n![Drag and Drop](https://i.postimg.cc/Xvh8zQv8/cats-demo.gif)\n\n## Basic Usage\n\nComponents can be imported using ES6 modules syntax:\n\n```javascript\nimport {\n  HorizontalLayout,\n  VerticalLayout,\n  Panel,\n  Separator,\n  Spacer,\n  View\n} from \"nice-react-layout\";\n```\n\nCreating a simple layout is as easy as this:\n\n```javascript\n\u003cHorizontalLayout mockup\u003e\n  \u003cPanel /\u003e\n  \u003cPanel /\u003e\n\u003c/HorizontalLayout\u003e\n```\n\nIt renders an horizontal layout with two panels of the same size (they have proportion=1 by default). Thanks to the 'mockup' prop it paints every panel with a random color, easing the layout prototyping process. Layouts get all the available space by default (in the parent element). If you want your layout to fill the viewport you can use the \u003cView\u003e component. Like this:\n\n```javascript\n\u003cView\u003e\n  \u003cHorizontalLayout mockup\u003e\n    \u003cPanel /\u003e\n    \u003cPanel /\u003e\n  \u003c/HorizontalLayout\u003e\n\u003c/View\u003e\n```\n\n\u003cbr /\u003e\nIn both horizontal and vertical layouts add the prop 'proportion' with the proportional part it takes from the available space. This example creates a typical sidebar + content layout:\n\n```javascript\n\u003cHorizontalLayout mockup\u003e\n  \u003cPanel proportion={1} /\u003e\n  \u003cPanel proportion={4} /\u003e\n\u003c/HorizontalLayout\u003e\n```\n\n\u003cbr /\u003e\nDo you want to add a separator between both panels? Use the Separator component:\n\n```javascript\n\u003cHorizontalLayout mockup\u003e\n  \u003cPanel proportion={1} /\u003e\n  \u003cSeparator /\u003e\n  \u003cPanel proportion={4} /\u003e\n\u003c/HorizontalLayout\u003e\n```\n\n\u003cbr /\u003e\nYou can nest layouts. Let's add a vertical layout, with its own Separator, inside the right panel:\n\n```javascript\n\u003cHorizontalLayout mockup\u003e\n  \u003cPanel proportion={1} /\u003e\n  \u003cSeparator /\u003e\n  \u003cPanel proportion={4}\u003e\n    \u003cVerticalLayout mockup\u003e\n      \u003cPanel /\u003e\n      \u003cSeparator /\u003e\n      \u003cPanel /\u003e\n    \u003c/VerticalLayout\u003e\n  \u003c/Panel\u003e\n\u003c/HorizontalLayout\u003e\n```\n\nTo enable drag-and-drop feature, use the `draggable` and `droppable` props:\n\n```javascript\n\u003cHorizontalLayout mockup\u003e\n  \u003cPanel draggable droppable /\u003e\n  \u003cPanel draggable droppable /\u003e\n\u003c/HorizontalLayout\u003e\n```\n\nFor a complete example with every feature, see the src/demo/App.js file. Or just run `yarn start`.\n\n## Components\n\n### View\n\nThe top-level component. It gets all the available viewport space. Use it if you want your layout to fill the viewport or pass width / height props.\n\n##### Props\n\n| Prop   | Description                    |\n| ------ | ------------------------------ |\n| width  | view width (100vw by default)  |\n| height | view height (100vh by default) |\n\n### HorizontalLayout\n\nIt creates an horizontal layout. This is shorthand component for:\n\n```javascript\n\u003cLayout orientation=\"horizontal\" /\u003e\n```\n\n### VerticalLayout\n\nIt creates vertical layout layout. This is a shorthand component for:\n\n```javascript\n\u003cLayout orientation=\"vertical\" /\u003e\n```\n\n### Layout\n\nCreates a layout.\n\n##### Props\n\n| Prop         | Description                                 |\n| ------------ | ------------------------------------------- |\n| className    | Top-level element class name                |\n| collapseSize | Collapsible panels size when collapsed      |\n| customCss    | Custom layout CSS object                    |\n| mockup       | Render in mockup mode                       |\n| onResize     | Returns (layout, collapsedPanels) on resize |\n| orientation  | 'vertical' or 'horizontal'                  |\n| reverse      | Render layout in reverse order              |\n\n### Panel\n\nHere is where your content goes.\nIf you are familiar with flexbox, this is like a \"flex item\" with a flex value of 1 by default. If not, don't worry, you don't need to know that :)\n\n##### Props\n\n| Prop                           | Description                                                                        |\n| ------------------------------ | ---------------------------------------------------------------------------------- |\n| centered                       | Center panel content                                                               |\n| className                      | Top-level element class name                                                       |\n| collapsible                    | The panel can be collapsed                                                         |\n| collapsed                      | Is the panel collapsed?                                                            |\n| collapseButtonClass            | Adds a class to the collapse button                                                |\n| collapseButtonContent          | A String or element                                                                |\n| collapseButtonCollapsedContent | A String or element                                                                |\n| collapseButtonStyle            | Inject inline CSS to the collapse button                                           |\n| collapsePanel                  | Called when collapse button is clicked                                             |\n| collapseSwitch                 | Custom collapse element (renders button if not provided)                           |\n| columns                        | Number of columns (uses CSS multiple columns)                                      |\n| customCss                      | Custom panel CSS object (injects it as an inline style)                            |\n| draggable                      | Enable dragging                                                                    |\n| droppable                      | Other panels can be dropped here                                                   |\n| minHeight                      | Minimum panel height                                                               |\n| minWidth                       | Minimum panel width                                                                |\n| mockup                         | Render in mockup mode                                                              |\n| orientation                    | 'vertical' or 'horizontal'                                                         |\n| proportion                     | Proportion it uses from the available space (default = 1)                          |\n| reverse                        | Render layout in reverse order                                                     |\n| showSize                       | Show panel size while dragging adjacent separators                                 |\n| sidebar                        | Don't do much by it self. It is a requirement for sidebar props like 'collapsible' |\n\n### Separator\n\nIt separates panels and allows them to be resized. This is optional.\n\n##### Props\n\n| Prop                   | Description                                                 |\n| ---------------------- | ----------------------------------------------------------- |\n| customCss              | Custom separator CSS object (injects it as an inline style) |\n| defaultDblClickPos     | Position where the separator goes when double-clicked       |\n| disabled               | Is disabled?                                                |\n| onSeparatorDoubleClick | Action called when the separator is double-clicked          |\n| onSeparatorMouseDown   | Action called when the mouse is over the separator          |\n\n### Spacer\n\nIt renders a blank space. Useful when you need to leave spaces between panels.\n\n##### Props\n\n| Prop | Description              |\n| ---- | ------------------------ |\n| size | Separator size in pixels |\n\n---\n\nLike this project? ★ us on Github :)\n","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fekros%2Fnice-react-layout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fekros%2Fnice-react-layout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fekros%2Fnice-react-layout/lists"}