{"_id":"react-mosaic-component","_rev":"60-61e7da4f051cb223fe3d840957a2d444","name":"react-mosaic-component","dist-tags":{"v6-latest":"6.2.0","latest":"7.1.0"},"versions":{"0.1.0":{"name":"react-mosaic-component","version":"0.1.0","license":"Apache-2.0","_id":"react-mosaic-component@0.1.0","maintainers":[{"name":"nomcopter","email":"kevinverdieck@gmail.com"}],"homepage":"https://github.com/palantir/react-mosaic#readme","bugs":{"url":"https://github.com/palantir/react-mosaic/issues"},"dist":{"shasum":"fb63d0997d6f7788bf7081a22ca32ee94ace926b","tarball":"https://registry.npmjs.org/react-mosaic-component/-/react-mosaic-component-0.1.0.tgz","integrity":"sha512-SIZ+W64NUWzRRUJIdLu3Jwu4QfWkl+48iVmnhLFP3+wh7nwgcc/htN2JvRmvwlw9tW7rqwba2W+JyBl36syltA==","signatures":[{"sig":"MEYCIQDEKRfwvvGrNEiHslfQ9pZ5TW3d+htryhenRbJ/4hXM+AIhAOe+Hkd5wNEkETSDtg69jkvpRGqsclrB4+ZvNK6FRwap","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"lib/index.js","_from":".","style":"lib/react-mosaic.css","_shasum":"fb63d0997d6f7788bf7081a22ca32ee94ace926b","scripts":{"dev":"webpack-dev-server --config webpack.config.hot.js --inline --hot --content-base dev/react-mosaic/ --host 0.0.0.0 --port 8092","dist":"yarn run bundle && tar cjf react-mosaic.tar.bz2 -C dev react-mosaic/","test":"mocha --opts test/mocha.opts 'test/*.ts'","build":"npm-run-all clean lib.compile.ts lib.compile.less lib.remove.type.references","clean":"rm -rf lib/ dev/react-mosaic/","bundle":"yarn run clean && webpack","prepublish":"yarn run build","lib.compile.ts":"tsc -p tsconfig-build.json","lib.compile.less":" lessc --source-map src/index.less lib/react-mosaic.css","lib.remove.type.references":"replace '^/// =16"},"_npmOperationalInternal":{"tmp":"tmp/react-mosaic-component_6.1.1_1734712870386_0.9117882713421062","host":"s3://npm-registry-packages-npm-production"}},"7.0.0-beta0":{"name":"react-mosaic-component","version":"7.0.0-beta0","keywords":["ui","react","component","typescript","tiling-window-manager","window-manager"],"license":"Apache-2.0","_id":"react-mosaic-component@7.0.0-beta0","maintainers":[{"name":"nomcopter","email":"kevinverdieck@gmail.com"},{"name":"lonli-lokli","email":"lonli.lokli@gmail.com"}],"homepage":"https://github.com/nomcopter/react-mosaic#readme","bugs":{"url":"https://github.com/nomcopter/react-mosaic/issues"},"dist":{"shasum":"9dd264ebf5d5ae38cd5dd82da738f2cbb833c7cf","tarball":"https://registry.npmjs.org/react-mosaic-component/-/react-mosaic-component-7.0.0-beta0.tgz","fileCount":130,"integrity":"sha512-EUeXrDZm2w7mw2Vq8Nw7dovw+Hi5YtCe3ybI/Fnuw4mXk6AZ8p4N+XsJL9QB8sr724zUszpCveaLThZ7/XSLow==","signatures":[{"sig":"MEQCIGqg4W22BlE8auNGXnHgBGwm1/gmKeq99yo8BdLv+0jmAiBGXQJJqGysmstO6uktY5qyqpB/mHSpVousmCoTgm1O2A==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/react-mosaic-component@7.0.0-beta0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":404108},"main":"./index.mjs","type":"module","style":"./react-mosaic-component.css","types":"./index.d.ts","exports":{".":{"import":"./index.mjs","require":{"types":"./index.d.ts","default":"./index.cjs"}},"./package.json":"./package.json","./react-mosaic-component.css":"./react-mosaic-component.css"},"gitHead":"c3fdf103b57e734988c16429ad85675f9ae4d416","_npmUser":{"name":"lonli-lokli","email":"lonli.lokli@gmail.com"},"repository":{"url":"git+https://github.com/nomcopter/react-mosaic.git","type":"git"},"_npmVersion":"10.9.4","description":"A React Tiling Window Manager","directories":{},"sideEffects":["*.css"],"_nodeVersion":"22.22.1","dependencies":{"uuid":"^11.1.0","dnd-core":"16.0.1","lodash-es":"^4.17.21","react-dnd":"^16.0.1","classnames":"^2.5.1","prop-types":"^15.8.1","immutability-helper":"^3.1.1","rdndmb-html5-to-touch":"^9.0.0","react-dnd-html5-backend":"^16.0.1","react-dnd-multi-backend":"^9.0.0","react-dnd-touch-backend":"^16.0.1"},"_hasShrinkwrap":false,"peerDependencies":{"react":"16 - 19"},"_npmOperationalInternal":{"tmp":"tmp/react-mosaic-component_7.0.0-beta0_1773417144324_0.9243239954616975","host":"s3://npm-registry-packages-npm-production"}},"6.2.0":{"name":"react-mosaic-component","version":"6.2.0","keywords":["ui","react","component","typescript","tiling-window-manager","window-manager"],"license":"Apache-2.0","_id":"react-mosaic-component@6.2.0","maintainers":[{"name":"nomcopter","email":"kevinverdieck@gmail.com"},{"name":"lonli-lokli","email":"lonli.lokli@gmail.com"}],"homepage":"https://github.com/nomcopter/react-mosaic#readme","bugs":{"url":"https://github.com/nomcopter/react-mosaic/issues"},"dist":{"shasum":"8169b5951d8d70c3936b78acb0094b8619d6700b","tarball":"https://registry.npmjs.org/react-mosaic-component/-/react-mosaic-component-6.2.0.tgz","fileCount":231,"integrity":"sha512-v7By4y0tFJNFAI/BUhXfTct87WQY9WaCpQwLaqed15jpE4g2sAo34GIB3LIhDHuhwwTU5lvmlVJUXcUggqSBQA==","signatures":[{"sig":"MEYCIQCzjMFXJzQSSmLhxeUPs1tIUSBXVaujPvSqxJ80u/ucdQIhAMBnXPsgfy1Q57Z1AcZfsqEuYIaS18gj9KEgwYkBxLgY","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":596761},"main":"lib/index.js","type":"commonjs","style":"lib/react-mosaic.css","funding":"https://github.com/nomcopter/react-mosaic?sponsor=1","gitHead":"f6c87055acdaf42d3f2c71d88e2af0bf68ecff04","scripts":{"fix":"npm-run-all -lp fix:**","test":"npm-run-all build -lp test:**","build":"npm-run-all clean -lp build:**","clean":"shx rm -rf lib/","start":"webpack-dev-server --config webpack/hot.ts","bundle":"shx rm -rf docs/ && webpack --config webpack/bundle.ts","version":"npm-run-all test bundle && git add -A docs/","build:ts":"tsc -p tsconfig-build.json","fix:lint":"yarn run test:lint --fix","test:lint":"tslint -c tslint.yml -p tsconfig.json -e test","test:unit":"mocha","build:less":"lessc --autoprefix=defaults styles/index.less react-mosaic-component.css","fix:format":"yarn run prettier:run --write","test:format":"yarn run prettier:run --list-different","prettier:run":"prettier \"styles/*.less\" \"*.md\" \"{,.}*.yml\" \".circleci/*.yml\""},"typings":"lib/index.d.ts","_npmUser":{"name":"lonli-lokli","email":"lonli.lokli@gmail.com"},"repository":{"url":"git+https://github.com/nomcopter/react-mosaic.git","type":"git"},"_npmVersion":"10.9.4","description":"A React Tiling Window Manager","directories":{},"sideEffects":["*.css"],"_nodeVersion":"22.22.0","dependencies":{"uuid":"^9.0.0","lodash":"^4.18.1","react-dnd":"^16.0.1","classnames":"^2.3.2","prop-types":"^15.8.1","immutability-helper":"^3.1.1","rdndmb-html5-to-touch":"^8.0.0","react-dnd-html5-backend":"^16.0.1","react-dnd-multi-backend":"^8.0.0","react-dnd-touch-backend":"^16.0.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"shx":"^0.4.0","chai":"^4.3.6","less":"^3.13.1","jsdom":"^15.2.1","mocha":"^6.2.3","react":"^18.2.0","tslint":"^6.1.3","ts-node":"^10.9.1","webpack":"^5.75.0","dnd-core":"16.0.1","prettier":"^2.8.4","react-dom":"^18.2.0","ts-loader":"^9.4.2","css-loader":"^6.7.3","typescript":"^4.9.5","@types/chai":"^4.3.0","@types/dom4":"^2.0.2","@types/uuid":"^9.0.0","html-loader":"^4.2.0","less-loader":"^11.1.0","npm-run-all":"^4.1.5","webpack-cli":"^5.0.1","@types/mocha":"^7.0.2","@types/react":"^18.0.28","jsdom-global":"^3.0.2","mock-require":"^3.0.3","style-loader":"^3.3.1","tslint-react":"^5.0.0","@types/lodash":"^4.17.24","react-refresh":"^0.14.0","@types/webpack":"^5.28.0","@types/react-dom":"^18.0.10","yarn-deduplicate":"^6.0.1","@blueprintjs/core":"^4.15.1","@types/classnames":"^2.3.1","@types/prop-types":"^15.7.5","source-map-loader":"^4.0.1","@blueprintjs/icons":"^4.13.1","webpack-dev-server":"^4.11.1","html-webpack-plugin":"^5.5.0","mocha-junit-reporter":"^1.23.3","less-plugin-autoprefix":"^2.0.0","tslint-config-prettier":"^1.18.0","tslint-plugin-prettier":"^2.3.0","@pmmmwh/react-refresh-webpack-plugin":"^0.5.10"},"peerDependencies":{"react":">=16"},"_npmOperationalInternal":{"tmp":"tmp/react-mosaic-component_6.2.0_1776339338471_0.5973044798325071","host":"s3://npm-registry-packages-npm-production"}},"7.0.0":{"name":"react-mosaic-component","version":"7.0.0","keywords":["ui","react","component","typescript","tiling-window-manager","window-manager"],"license":"Apache-2.0","_id":"react-mosaic-component@7.0.0","maintainers":[{"name":"nomcopter","email":"kevinverdieck@gmail.com"},{"name":"lonli-lokli","email":"lonli.lokli@gmail.com"}],"homepage":"https://github.com/nomcopter/react-mosaic#readme","bugs":{"url":"https://github.com/nomcopter/react-mosaic/issues"},"dist":{"shasum":"1fb720c4f392d5da52123707d0fc600a6dfcaca5","tarball":"https://registry.npmjs.org/react-mosaic-component/-/react-mosaic-component-7.0.0.tgz","fileCount":138,"integrity":"sha512-soy7p/ikWYcrnZ6hghtvHqEtShUSunTpD7JBOpHcFQqnUkmPPjXKH9lFOrPJBN8lx7tn2Ca3ZPuKIYG2VQyVWQ==","signatures":[{"sig":"MEUCIH20bkcLP+UILhEIF/fpY7SdCxbTtiqjZy5PxeQzFuhhAiEAueZJlN0y7ge3q8hXRwjALINU26nt9ubkarunLHYGASc=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/react-mosaic-component@7.0.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":401498},"main":"./index.mjs","type":"module","style":"./react-mosaic-component.css","types":"./index.d.ts","exports":{".":{"import":"./index.mjs","require":{"types":"./index.d.ts","default":"./index.cjs"}},"./package.json":"./package.json","./react-mosaic-component.css":"./react-mosaic-component.css"},"gitHead":"3991eec660ce719474f9c9c5e165932ac398c37f","_npmUser":{"name":"lonli-lokli","email":"lonli.lokli@gmail.com"},"repository":{"url":"git+https://github.com/nomcopter/react-mosaic.git","type":"git"},"_npmVersion":"10.9.4","description":"A React Tiling Window Manager","directories":{},"sideEffects":["*.css"],"_nodeVersion":"22.22.1","dependencies":{"uuid":"^11.1.0","dnd-core":"16.0.1","lodash-es":"^4.18.1","react-dnd":"^16.0.1","classnames":"^2.5.1","prop-types":"^15.8.1","immutability-helper":"^3.1.1","rdndmb-html5-to-touch":"^9.0.0","react-dnd-html5-backend":"^16.0.1","react-dnd-multi-backend":"^9.0.0","react-dnd-touch-backend":"^16.0.1"},"_hasShrinkwrap":false,"peerDependencies":{"react":"16 - 19"},"_npmOperationalInternal":{"tmp":"tmp/react-mosaic-component_7.0.0_1783942390547_0.3203340971966637","host":"s3://npm-registry-packages-npm-production"}},"7.1.0":{"name":"react-mosaic-component","version":"7.1.0","description":"A React Tiling Window Manager","main":"./index.mjs","type":"module","exports":{"./react-mosaic-component.css":"./react-mosaic-component.css","./package.json":"./package.json",".":{"import":"./index.mjs","require":{"types":"./index.d.cts","default":"./index.cjs"}}},"style":"./react-mosaic-component.css","repository":{"type":"git","url":"git+https://github.com/nomcopter/react-mosaic.git"},"sideEffects":["*.css"],"keywords":["ui","react","component","typescript","tiling-window-manager","window-manager"],"license":"Apache-2.0","dependencies":{"classnames":"^2.5.1","dnd-core":"16.0.1","immutability-helper":"^3.1.1","lodash-es":"^4.18.1","prop-types":"^15.8.1","rdndmb-html5-to-touch":"^9.0.0","react-dnd":"^16.0.1","react-dnd-html5-backend":"^16.0.1","react-dnd-multi-backend":"^9.0.0","react-dnd-touch-backend":"^16.0.1","uuid":"^11.1.1"},"peerDependencies":{"react":"16 - 19"},"_id":"react-mosaic-component@7.1.0","gitHead":"f499ae548f1f03b8b476d687a8066579de739938","bugs":{"url":"https://github.com/nomcopter/react-mosaic/issues"},"homepage":"https://github.com/nomcopter/react-mosaic#readme","_nodeVersion":"22.22.1","_npmVersion":"10.9.4","dist":{"integrity":"sha512-jEZrHZrrrbhYAQeke+ZUZfnUmDQD4BLS1BWVLik8KNnta/TemfraOoLJUeA6wQYlmeGkR3KMU3KOFQkUBtlsng==","shasum":"19a1c279e0b0f06a2594d57d6af2ab25f878f827","tarball":"https://registry.npmjs.org/react-mosaic-component/-/react-mosaic-component-7.1.0.tgz","fileCount":71,"unpackedSize":530201,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/react-mosaic-component@7.1.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQChKnVFZfHYr8isnNUuaYtrmi/3xmWE1jGoRLKhKx26fQIgSq1H9uKd761xuaf3CP095Qc+chlt8XqyJNgQfQubvCw="}]},"_npmUser":{"name":"lonli-lokli","email":"lonli.lokli@gmail.com"},"directories":{},"maintainers":[{"name":"nomcopter","email":"kevinverdieck@gmail.com"},{"name":"lonli-lokli","email":"lonli.lokli@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-mosaic-component_7.1.0_1789045076165_0.7005079271292445"},"_hasShrinkwrap":false}},"time":{"created":"2017-03-24T04:04:37.703Z","modified":"2026-09-10T12:57:56.667Z","0.1.0":"2017-03-24T04:04:37.703Z","0.2.0":"2017-03-24T04:32:09.830Z","0.3.0":"2017-03-24T19:43:19.769Z","0.3.1":"2017-04-03T21:53:24.270Z","0.3.2":"2017-04-11T06:22:17.725Z","0.3.3":"2017-04-11T06:45:54.041Z","0.3.4":"2017-04-27T18:50:57.647Z","0.3.5":"2017-05-02T20:55:13.914Z","0.3.6":"2017-05-03T20:18:26.640Z","0.3.7":"2017-05-04T02:14:09.003Z","0.3.8":"2017-05-05T18:48:58.702Z","0.4.0":"2017-05-17T18:27:50.461Z","0.4.1":"2017-07-19T20:38:27.861Z","0.4.2":"2017-07-25T19:06:02.422Z","0.4.3":"2017-09-26T23:24:36.135Z","0.4.4":"2017-09-26T23:37:20.047Z","0.4.5":"2017-09-29T23:35:40.316Z","0.4.6":"2017-10-10T04:35:41.995Z","1.0.0":"2017-10-19T04:11:25.118Z","1.0.1":"2017-10-19T04:19:51.080Z","1.0.2":"2017-10-23T18:23:23.310Z","1.0.3":"2017-11-08T22:28:11.657Z","1.1.0":"2018-03-09T22:41:52.925Z","1.1.1":"2018-04-30T00:59:36.108Z","2.0.0":"2018-10-08T04:36:19.243Z","2.0.1":"2018-10-30T05:05:53.479Z","2.0.2":"2018-11-10T01:18:48.848Z","2.1.0":"2019-02-25T18:30:04.283Z","3.0.0":"2019-06-18T06:49:43.598Z","3.0.1":"2019-06-18T07:15:32.924Z","3.1.0":"2019-06-18T22:31:10.862Z","3.2.0":"2019-06-24T01:50:05.798Z","4.0.0":"2020-02-27T23:42:22.763Z","4.0.1":"2020-05-20T02:27:29.240Z","4.1.1":"2020-05-21T03:55:54.147Z","5.0.0":"2021-05-02T01:36:36.230Z","5.1.0":"2022-03-26T23:37:56.396Z","5.1.2":"2022-07-29T05:28:31.194Z","5.1.3-alpha.1":"2022-07-29T13:58:29.167Z","5.1.3-alpha.2":"2022-07-29T14:08:59.472Z","5.2.0":"2022-07-29T15:30:52.873Z","5.2.1":"2022-07-31T12:09:23.368Z","5.2.2":"2022-08-03T15:37:09.803Z","5.3.0":"2022-08-03T16:27:42.615Z","6.0.0":"2023-02-14T02:24:17.041Z","6.0.1":"2023-04-24T18:50:00.360Z","6.1.0":"2023-09-18T06:07:54.514Z","6.1.1":"2024-12-20T16:41:10.590Z","7.0.0-beta0":"2026-03-13T15:52:24.469Z","6.2.0":"2026-04-16T11:35:38.609Z","7.0.0":"2026-07-13T11:33:10.739Z","7.1.0":"2026-09-10T12:57:56.295Z"},"bugs":{"url":"https://github.com/nomcopter/react-mosaic/issues"},"license":"Apache-2.0","homepage":"https://github.com/nomcopter/react-mosaic#readme","keywords":["ui","react","component","typescript","tiling-window-manager","window-manager"],"repository":{"type":"git","url":"git+https://github.com/nomcopter/react-mosaic.git"},"description":"A React Tiling Window Manager","maintainers":[{"name":"nomcopter","email":"kevinverdieck@gmail.com"},{"name":"lonli-lokli","email":"lonli.lokli@gmail.com"}],"readme":"[![NPM Version](https://img.shields.io/npm/v/react-mosaic-component.svg)](https://www.npmjs.com/package/react-mosaic-component)\n[![React](https://img.shields.io/badge/React-16%20%7C%2017%20%7C%2018%20%7C%2019-blue.svg)](https://reactjs.org/)\n[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)\n\n

\n\"React\n

\n\n**react-mosaic** is a React tiling window manager. It gives you a drag-to-resize, drag-to-rearrange layout of panels that users can freely rearrange โ€” inspired by IDE window management and i3-style tiling.\n\n**๐Ÿ“– [Documentation](https://nomcopter.github.io/react-mosaic/) ยท ๐ŸŽฎ [Demo](https://nomcopter.github.io/react-mosaic/demo) ยท ๐Ÿ“š [API reference](https://nomcopter.github.io/react-mosaic/docs/api) ยท ๐Ÿšš [Migration from v6](https://nomcopter.github.io/react-mosaic/docs/migration/from-v6)**\n\n[![screencast demo](./screencast.gif)](./screencast.gif)\n\n## Install\n\n```bash\nnpm install react-mosaic-component react react-dom\n```\n\nImport the stylesheet in your app's entry point:\n\n```tsx\nimport 'react-mosaic-component/react-mosaic-component.css';\n```\n\n## Quick start\n\n```tsx\nimport { Mosaic, MosaicWindow } from 'react-mosaic-component';\nimport 'react-mosaic-component/react-mosaic-component.css';\n\nexport function App() {\n return (\n
\n \n renderTile={(id, path) => (\n path={path} title={`Panel ${id}`}>\n
Contents of {id}
\n \n )}\n initialValue={{\n type: 'split',\n direction: 'row',\n children: ['a', 'b'],\n }}\n />\n
\n );\n}\n```\n\nThat's a two-panel layout with a draggable divider, drag handles on each window title bar, and default toolbar buttons โ€” in 15 lines.\n\nFor live editable examples, the n-ary tree model, custom toolbars, tabs, theming, and the full API reference, see the **[documentation site](https://nomcopter.github.io/react-mosaic/)**.\n\n## Features\n\n- **N-ary tree layouts.** A single split can hold any number of children, not just two.\n- **Tabs as first-class citizens.** Tab containers are a node type, not a bolted-on convention.\n- **Controlled or uncontrolled.** Pass `value` + `onChange` to manage the tree yourself, or `initialValue` to let the component own it.\n- **Drag-and-drop.** Built on `react-dnd` with HTML5 and touch backends.\n- **Theming.** Works with or without Blueprint; ships a default CSS theme plus CSS variables you can override.\n- **Zero-config migration.** Legacy v6 binary trees are auto-converted at render time. `convertLegacyToNary` is available for explicit upgrades.\n\n## Contributing\n\nContributions are welcome:\n\n- Clone and install: `npm install`\n- Start the docs site (hot-reloads the demo and live code blocks): `npm start`\n- Build the library: `npm run build:lib`\n- Run tests: `npm test`\n- Lint: `npm run lint`\n\nIssues and pull requests: [github.com/nomcopter/react-mosaic](https://github.com/nomcopter/react-mosaic)\n\n## License\n\nApache License 2.0 โ€” see [LICENSE](./LICENSE).\n\nOriginally developed by Kevin Verdieck at Palantir Technologies, Inc.\n","readmeFilename":"README.md","users":{"rexpan":true,"nomcopter":true}}