{"id":47157857,"url":"https://github.com/berkeleytrue/react-redux-subdivide","last_synced_at":"2026-03-13T02:35:36.839Z","repository":{"id":57343347,"uuid":"86388734","full_name":"BerkeleyTrue/react-redux-subdivide","owner":"BerkeleyTrue","description":null,"archived":false,"fork":false,"pushed_at":"2017-09-03T15:37:34.000Z","size":2912,"stargazers_count":6,"open_issues_count":5,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-30T19:46:37.674Z","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":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BerkeleyTrue.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-03-27T22:08:52.000Z","updated_at":"2019-08-16T14:47:49.000Z","dependencies_parsed_at":"2022-09-12T06:30:34.013Z","dependency_job_id":null,"html_url":"https://github.com/BerkeleyTrue/react-redux-subdivide","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/BerkeleyTrue/react-redux-subdivide","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BerkeleyTrue%2Freact-redux-subdivide","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BerkeleyTrue%2Freact-redux-subdivide/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BerkeleyTrue%2Freact-redux-subdivide/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BerkeleyTrue%2Freact-redux-subdivide/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BerkeleyTrue","download_url":"https://codeload.github.com/BerkeleyTrue/react-redux-subdivide/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BerkeleyTrue%2Freact-redux-subdivide/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30455997,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-13T02:22:12.178Z","status":"ssl_error","status_checked_at":"2026-03-13T02:06:49.475Z","response_time":60,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5: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-03-13T02:35:32.745Z","updated_at":"2026-03-13T02:35:36.827Z","avatar_url":"https://github.com/BerkeleyTrue.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Subdivide Layout\n\n[![Greenkeeper badge](https://badges.greenkeeper.io/BerkeleyTrue/react-redux-subdivide.svg)](https://greenkeeper.io/)\n\n[![Build Status](https://travis-ci.org/BerkeleyTrue/react-redux-subdivide.svg?branch=master)](https://travis-ci.org/BerkeleyTrue/react-redux-subdivide)\n[![Coverage Status](https://coveralls.io/repos/github/BerkeleyTrue/react-redux-subdivide/badge.svg?branch=master)](https://coveralls.io/github/BerkeleyTrue/react-redux-subdivide?branch=master)\n[![version](https://img.shields.io/npm/v/react-redux-subdivide.svg?style=flat-square)](http://npm.im/react-redux-subdivide)\n[![CC0 License](https://img.shields.io/npm/l/subdivide.svg?style=flat-square)](https://creativecommons.org/publicdomain/zero/1.0/)\n\n\n\nSplit pane layout system for React and Redux apps. Each pane can be subdivided and any widget assigned to any pane allowing users define layout. Panes can be:\n\n* subdivided above a minimum size\n* subdivided horizontally or vertically\n* subdivided by dragging corners\n* resized by dragging edges\n* merged by dragging corners onto adjacent panes \n\nWhen a new pane is created the user can chose which widget to display in that pane. The result is an application where the user can decide on an interface that suits their work flow.\n\nIt should also be possible to quickly mash up applications out of preexisting parts.\n\n----\n\n\n## Usage\n\n```bash\nnpm install react-redux-subdivide\n```\n\nSubdivide exposes the `Subdivide` component, a redux `reducer`, and a redux-observable `epic`.\n\n\n\n```jsx\nimport React, { Component } from 'react';\nimport ReactDOM from 'react-dom';\nimport {\n  createStore,\n  combineReducers,\n  applyMiddleware\n} from 'redux';\nimport { connect, Provider } from 'react-redux';\nimport {\n  createEpicMiddleware,\n  combineEpics\n} from 'redux-observable';\nimport myEpics from './my-epics.js';\n\nimport {\n  Subdivide,\n  reducer as subdivideReducer,\n  epic as subdivideEpic\n} from 'subdivide';\n\n\nclass Chooser extends Component {\n  constructor(...args) {\n    super(...args);\n    this.state = { choice: null };\n    this.onSelect = this.onSelect.bind(this);\n  }\n\n  onSelect(choice) {\n    this.setState({ choice });\n  }\n  \n  renderMenu() {\n    const choices = [\n  \t  'world',\n  \t  'moon',\n  \t  'universe',\n  \t  'galaxy'\n  \t];\n  \treturn choices.map(choice =\u003e (\n      \u003cbutton\n        key={ choice }\n        onSelect={ () =\u003e onSelect(choice) }\n        \u003e\n        { choice }\n      \u003c/button\u003e\n    ));\n);\n\n\n  render() {\n    const { choice } = this.state;\n\n    return !choice ?\n      \u003cdiv\u003e{ this.renderChoices() }\u003c/div\u003e :\n      \u003ch1 /\u003eHello { choice }!\u003c/h1\u003e;\n  }\n}\n\nconst epicMiddleware =  createEpicMiddleware(\n  combineEpics(...myEpics, subdivideEpic),\n  // make sure to provide dependencies here\n  // so subdivide can interface with the users\n  // mouse movements\n  { dependencies: { window, document } }\n);\n\nconst store = createStore(\n  combineReducers({\n  \t// this syntax will put the subdivide reducer\n  \t// on it's own key in the redux store.\n  \t// without doing this subdivide will not now\n  \t// where to look for it's own state\n  \t[subdivideReducer]: subdivideReducer\n  }),\n  applyMiddleware(\n    epicMiddleware\n  )\n);\n\nReactDOM.render(\n  \u003cProvider store={store}\u003e\n    \u003cSubdivide DefaultComponent={Chooser} /\u003e\n  \u003c/Provider\u003e,\n  document.getElementById('root')\n);\n```\n\n## Run Example\n```bash\nnpm install\nnpm start\n```\n\nOpen the following link in a browser:\n\n[`http://localhost:3000`](http://localhost:3000)\n\n## Testing\n\nRun the following two commands in separate terminals\n\n```bash\nnpm run test:watch\nnpm run cover:watch\n```\n\nThe first will start the testing scripts and rerun them on file changes.\nThe second will run a task that will watch for file changes and run the coverage on the files.\n\nYou can open the html page displaying current coverage using the following\n\n```bash\nnpm run cover:show\n```\n\n\n----\n\n\nReact-redux-subdivide is based off of the fantastic [Subdivide](https://github.com/philholden/subdivide) project.\n\nAlthough similar in appearence, the main differences from that project is a significant change in API, removing Immutable.js, adding the powerfull RxJS to accomplish the complex side-effects in Redux using [Redux-Observable](https://github.com/redux-observable/redux-observable)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fberkeleytrue%2Freact-redux-subdivide","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fberkeleytrue%2Freact-redux-subdivide","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fberkeleytrue%2Freact-redux-subdivide/lists"}