{"id":48319592,"url":"https://github.com/damienleroux/react-grid-layout-builder","last_synced_at":"2026-04-05T00:37:03.371Z","repository":{"id":95177857,"uuid":"58137192","full_name":"damienleroux/react-grid-layout-builder","owner":"damienleroux","description":"a user interface to build react-grid-layout properties","archived":false,"fork":false,"pushed_at":"2019-04-11T23:37:52.000Z","size":3281,"stargazers_count":49,"open_issues_count":1,"forks_count":5,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-10-26T22:31:16.083Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/damienleroux.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2016-05-05T14:33:37.000Z","updated_at":"2024-05-11T07:51:21.000Z","dependencies_parsed_at":null,"dependency_job_id":"2012a710-271f-418d-aaf8-477c2520ba7e","html_url":"https://github.com/damienleroux/react-grid-layout-builder","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/damienleroux/react-grid-layout-builder","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/damienleroux%2Freact-grid-layout-builder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/damienleroux%2Freact-grid-layout-builder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/damienleroux%2Freact-grid-layout-builder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/damienleroux%2Freact-grid-layout-builder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/damienleroux","download_url":"https://codeload.github.com/damienleroux/react-grid-layout-builder/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/damienleroux%2Freact-grid-layout-builder/sbom","scorecard":{"id":318088,"data":{"date":"2025-08-11","repo":{"name":"github.com/damienleroux/react-grid-layout-builder","commit":"502af3466ca062f9b166709e3a0f7915a131f523"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":1.9,"checks":[{"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":"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":"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":"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":"Code-Review","score":1,"reason":"Found 2/16 approved changesets -- score normalized to 1","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":"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: Apache License 2.0: 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":"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":"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":"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":"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":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 16 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":"84 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","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-pxg6-pf52-xh8x","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-8r6j-v8pm-fqw3","Warn: Project is vulnerable to: MAL-2023-462","Warn: Project is vulnerable to: GHSA-qh2h-chj9-jffq","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-4hpf-3wq7-5rpr","Warn: Project is vulnerable to: GHSA-f522-ffg8-j8r6","Warn: Project is vulnerable to: GHSA-2pr6-76vf-7546","Warn: Project is vulnerable to: GHSA-8j8c-7jfh-h6hx","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-282f-qqgm-c34q","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-fvqr-27wr-82fm","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-h726-x36v-rx45","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-hxm2-r34f-qmc5","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-76c9-3jph-rj3q","Warn: Project is vulnerable to: GHSA-28xh-wpgr-7fm8","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-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-hxcm-v35h-mg2x","Warn: Project is vulnerable to: GHSA-6g33-f262-xjp4","Warn: Project is vulnerable to: GHSA-mvjj-gqq2-p4hw","Warn: Project is vulnerable to: GHSA-x3m3-4wpv-5vgc","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg","Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p","Warn: Project is vulnerable to: GHSA-4rq4-32rv-6wp6","Warn: Project is vulnerable to: GHSA-64g7-mvw6-v9qj","Warn: Project is vulnerable to: GHSA-c9g6-9335-x697","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-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-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"],"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-18T00:43:13.683Z","repository_id":95177857,"created_at":"2025-08-18T00:43:13.683Z","updated_at":"2025-08-18T00:43:13.683Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31420402,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-05T00:25:07.052Z","status":"ssl_error","status_checked_at":"2026-04-05T00:25:05.923Z","response_time":60,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: 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":[],"created_at":"2026-04-05T00:37:02.774Z","updated_at":"2026-04-05T00:37:03.361Z","avatar_url":"https://github.com/damienleroux.png","language":"JavaScript","readme":"# react-grid-layout-builder\n\nReact-grid-layout-builder offers a React user interface to interact with the [react-grid-layout](https://github.com/STRML/react-grid-layout) configuration. \nBe careful:\n* React-grid-layout-builder doesn't add additional features to existing React-grid-layout. Read more about [React-grid-layout features](https://github.com/STRML/react-grid-layout#features) if required.\n* React-grid-layout-builder works only on [responsive react-grid-layout](https://github.com/STRML/react-grid-layout#responsive-usage). Any help on other React-grid-layout component is welcome :)\n\n## Motivation\n\n[React-grid-layout](https://github.com/STRML/react-grid-layout) is fun. I wanted to play with it without coding the configuration. So I tried to make a user-friendly editor. Happy to share it now :)\n\n## Demos\n\n1. [Bootstrap editor DEMO](http://damienleroux.github.io/react-grid-layout-builder/demo/bootstrap/index.html)\n2. [Material editor DEMO](http://damienleroux.github.io/react-grid-layout-builder/demo/material-ui/index.html)\n\n![reactgridlayoutbuilderdemo](https://cloud.githubusercontent.com/assets/12717418/15196785/5ab09438-17ce-11e6-87dd-11bfc90c7526.gif)\n\n\n## Installation\n\n### To try it locally:\n\n - clone this repository\n - go into the cloned folder\n - cmd `npm i`\n - cmd `npm run start`\n - open urls\n    - [http://localhost:3100/bootstrap/index.html](http://localhost:3100/bootstrap/index.html) for bootstrap editor\n    - [http://localhost:3100/material-ui/index.html](http://localhost:3100/material-ui/index.html) for material-ui editor\n\n### To install as dependency:\n\nInstall the React-Grid-Layout-builder [package](https://www.npmjs.com/package/react-grid-layout-builder) package using [npm](https://www.npmjs.com/):\n\n```bash\nnpm install react-grid-layout-builder\n```\n\nInclude the following stylesheets in your application:\n\n```\n/node_modules/react-grid-layout-builder/css/styles.css\n/node_modules/react-grid-layout/css/styles.css\n/node_modules/react-resizable/css/styles.css\n\n\u003clink rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css\"\u003e\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"stylesheets/font-awesome/css/font-awesome.min.css\"\u003e\n```\n\nThis builder editor is graphically powered by [Bootstrap](http://getbootstrap.com/getting-started/)\n\nInclude the following stylesheets in your application:\n\n```\n\u003clink rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css\"\u003e\n```\nOr create your own editor on the model given in [src/bootstrapEditor](https://github.com/damienleroux/react-grid-layout-builder/blob/master/src/bootstrapEditor.js). You'll be able to add fields or remove others\nIn that case, you'll have to wrap it with `connectReactGridLayoutBuilderToEditor`. Example:\n\n```javascript\n\n//YourOwnBuilderEditor is a copy of src/bootstrapEditor with your own style and your own fields\nvar ReactGridLayoutBuilder = connectReactGridLayoutBuilderToEditor(YourOwnBuilderEditor);\nexport default ReactGridLayoutBuilder;\n```\n\n\nThis opening dock icon is graphically powered by [Bootstrap](http://fontawesome.io/)\n\nInclude the following stylesheets in your application if you use it:\n\n```\n\u003clink rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css\"\u003e\n```\nOr put the editor anywhere else on your app.\n\n## Features\n\nReact-grid-layout-builder is to use on the [responsive react-grid-layout](https://github.com/STRML/react-grid-layout#responsive-usage) only and can be used to:\n\n* track any changes when playing with React-grid-layout\n* edit number of columns on the fly\n* edit breakpoints pixel value on the fly\n* edit the height defined as basic row\n* set all the grid as static\n\n## Usage\n\nAll questions about the grid generation and the possible configurable options are presents on [react-grid-layout repository](https://github.com/STRML/react-grid-layout). I trust you know how to use react-grid-layout and will explain now how React-Grid-Layout-builder works. React-Grid-Layout-builder is used as a wrapper on an existing React-Grid-Layout component. To demonstrate how to us the builder, I'll try it on the [responsive react-grid-layout example](https://github.com/STRML/react-grid-layout#providing-grid-width)\n\nTo have the builder work with the [responsive react-grid-layout example](https://github.com/STRML/react-grid-layout#providing-grid-width), we must:\n\n* import the connect function `connectReactGridLayoutBuilder` to track any change in the `react-grid-layout` component\n* import the builder `ReactGridLayoutBuilder` to offer additional field to modify the react-grid-layout configuration\n* put the react-grid-layout configuration into a state to be able to modify it from a callback\n* sent the callback that modify the react-grid-layout configuration to both `connectReactGridLayoutBuilder` and `ReactGridLayoutBuilder`\n\n### An example:\n\n```javascript\nimport {Responsive, WidthProvider} from 'react-grid-layout';\nimport ReactGridLayoutBuilder, {connectReactGridLayoutBuilder} from 'react-grid-layout-builder';\n\n//the responsive react-grid-layout is wrapped to be connected to the builder functions\nconst ResponsiveReactGridLayout = connectReactGridLayoutBuilder(WidthProvider(Responsive)); \n\n...\nconstructor() {\n  super();\n  //the grid layout is put on the state\n  this.state.gridLayout = \n    layouts: getLayoutsFromSomewhere(),\n    breakpoints: {lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0},\n    cols: {lg: 12, md: 10, sm: 6, xs: 4, xxs: 2}\n  }\n}\n\n//any update from the grid layout or from the builder will update the component state to update both ReactGridLayoutBuilder \u0026 ResponsiveReactGridLayout data\nupdateConfig = (newGridLayout) =\u003e {\n  this.setState({gridLayout: newGridLayout});\n}\n  \n//An additional props updateConfigFunc must be provided to ResponsiveReactGridLayout to be able to track relevant changes when playing with the grid layout component it-self\n//The usual react grid layout configuration, put in the component state, is sent to the grid layout component.\nrender() {\n  return (\n    \u003cdiv\u003e\n      \u003cReactGridLayoutBuilder reactGridLayout={this.props.conf} updateConfigFunc={this.props.updateConfig}/\u003e\n      \u003cResponsiveReactGridLayout className=\"layout\" \n        {...this.state.gridLayout}\n        updateConfigFunc={this.props.updateConfig}\u003e\n        \u003cdiv key={\"1\"}\u003e1\u003c/div\u003e\n        \u003cdiv key={\"2\"}\u003e2\u003c/div\u003e\n        \u003cdiv key={\"3\"}\u003e3\u003c/div\u003e\n      \u003c/ResponsiveReactGridLayout\u003e\n    \u003c/div\u003e\n  )\n}\n...\n```\n\n### API:\n\n#### ReactGridLayoutBuilder\n`\u003cReactGridLayoutBuilder/\u003e` is a react component that renders fields to edit some of the [react-grid-layout possible props](https://github.com/STRML/react-grid-layout#grid-layout-props).\n\nThis component uses [Bootstrap](http://getbootstrap.com/getting-started/) \u0026 [React-Bootstrap](https://react-bootstrap.github.io/) for rendering the fields\n\nThe builder can be used to set:\n\n```javascript\n// If true, the container height swells and contracts to fit contents\nautoSize: ?boolean = true,\n\n// {name: pxVal}, e.g. {lg: 1200, md: 996, sm: 768, xs: 480}\n// Breakpoint names are arbitrary but must match in the cols and layouts objects.\nbreakpoints: ?Object = {lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0},\n\n// # of cols. This is a breakpoint -\u003e cols map, e.g. {lg: 12, md: 10, ...}\ncols: ?Object = {lg: 12, md: 10, sm: 6, xs: 4, xxs: 2},\n\n// If true, the layout will compact vertically\nverticalCompact: ?boolean = true,\n\n// Margin between items [x, y] in px.\nmargin: ?[number, number] = [10, 10],\n\n// Rows have a static height, but you can change this based on breakpoints\n// if you like.\nrowHeight: ?number = 150,\n\n//\n// Flags\n//\nisDraggable: ?boolean = true,\nisResizable: ?boolean = true,\n```\n\n\n#### connectReactGridLayoutBuilder\n\n`connectReactGridLayoutBuilder` is a high order component wrapping the responsive react-grid-layout component to trigger a callback `updateConfig` when the layout is changed there. the callback has as parameter the [react-grid-layout possible props](https://github.com/STRML/react-grid-layout#grid-layout-props). \n\n```javascript\nimport {Responsive, WidthProvider} from 'react-grid-layout';\nimport {connectReactGridLayoutBuilder} from 'react-grid-layout-builder';\n\n//the responsive react-grid-layout is wrapped to be connected to the builder functions\nconst ResponsiveReactGridLayout = connectReactGridLayoutBuilder(WidthProvider(Responsive)); \n\n...\nconstructor() {\n  super();\n  //the grid layout is put on the state\n  this.state.gridLayout = \n    layouts: getLayoutsFromSomewhere(),\n    breakpoints: {lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0},\n    cols: {lg: 12, md: 10, sm: 6, xs: 4, xxs: 2}\n  }\n}\n\n//any update from the grid layout or from the builder will update the component state to update both ReactGridLayoutBuilder \u0026 ResponsiveReactGridLayout data\nupdateConfig = (newGridLayout) =\u003e {\n  this.setState({gridLayout: newGridLayout});\n}\n  \n//An additional props updateConfigFunc must be provided to ResponsiveReactGridLayout to be able to track relevant changes when playing with the grid layout component it-self\n//The usual react grid layout configuration, put in the component state, is sent to the grid layout component.\nrender() {\n  return (\n    \u003cdiv\u003e\n      \u003cResponsiveReactGridLayout className=\"layout\" \n        {...this.state.gridLayout}\n        updateConfigFunc={this.props.updateConfig}\u003e\n        \u003cdiv key={\"1\"}\u003e1\u003c/div\u003e\n        \u003cdiv key={\"2\"}\u003e2\u003c/div\u003e\n        \u003cdiv key={\"3\"}\u003e3\u003c/div\u003e\n      \u003c/ResponsiveReactGridLayout\u003e\n    \u003c/div\u003e\n  )\n}\n...\n```\n\n#### withOpeningDock\n\n`withOpeningDock` is a high order component used to have a react component displayed only if the user choose it. This is a simple UI component and you can choose to not use it if you want.\n\nIf you want to use it, wrap `ReactGridLayoutBuilder` with it:\n\n```javascript\nimport ReactGridLayoutBuilder, {withOpeningDock} from '../../src';\nconst ReactGridLayoutBuilder = connectReactGridLayoutBuilder(WidthProvider(Responsive)); \nvar DockedReactGridLayoutBuilder = withOpeningDock(ReactGridLayoutBuilder);\n\n...\nrender() {\n  return (\n    \u003cdiv\u003e\n      \u003cDockedReactGridLayoutBuilder reactGridLayout={this.props.conf} updateConfigFunc={this.props.updateConfig}/\u003e\n      \u003cResponsiveReactGridLayout className=\"layout\" \n        {...this.state.gridLayout}\n        updateConfigFunc={this.props.updateConfig}\u003e\n        \u003cdiv key={\"1\"}\u003e1\u003c/div\u003e\n        \u003cdiv key={\"2\"}\u003e2\u003c/div\u003e\n        \u003cdiv key={\"3\"}\u003e3\u003c/div\u003e\n      \u003c/ResponsiveReactGridLayout\u003e\n    \u003c/div\u003e\n  )\n}\n...\n```\n\n## TODO List\n\n- [ ] Get feedbacks and improve\n- [ ] Transform the generated layout as static\n- [ ] Choose which item is static or not\n- [ ] Choose which item is displayed or not\n- [ ] Provide an editor for not-responsive grid layout\n- [x] Provide an editor based on material UI (thanks to [@nywooz](https://github.com/nywooz))\n- [ ] Have the materia-ui demo working without bootstrap css (fix css grid)\n- [x] Save \u0026 load the current custom layout in local storage (thanks to [@nywooz](https://github.com/nywooz))\n- [x] Download the current layout \u0026 upload a custom one (thanks to [@nywooz](https://github.com/nywooz))\n","funding_links":[],"categories":["📦 Legacy \u0026 Inactive Projects"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdamienleroux%2Freact-grid-layout-builder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdamienleroux%2Freact-grid-layout-builder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdamienleroux%2Freact-grid-layout-builder/lists"}