{"_id":"radium-constraints","_rev":"85-e13e5bee07073949e3962dcb5137b3ad","name":"radium-constraints","dist-tags":{"latest":"0.4.1"},"versions":{"0.2.0":{"name":"radium-constraints","version":"0.2.0","author":{"name":"Tyler Thompson"},"license":"MIT","_id":"radium-constraints@0.2.0","maintainers":[{"name":"tptee","email":"tyler@tylerpaulthompson.com"}],"homepage":"https://github.com/FormidableLabs/radium-constraints","bugs":{"url":"https://github.com/FormidableLabs/radium-constraints/issues"},"dist":{"shasum":"7b4006f1d622e45c4e15f21f7adc4c7f71b338b2","tarball":"https://registry.npmjs.org/radium-constraints/-/radium-constraints-0.2.0.tgz","integrity":"sha512-wGeZR9zmd1Gh6OXdTt133GU51Q8HO9FIFnWr8XMS4HZbw1KM+yS5Ss6LfRapQl3YDMVwDdQuhSQm6a8PhRMbGA==","signatures":[{"sig":"MEYCIQDNjl+lUpcEvlx4FSAMukR0RNaAC8Sb1JqUHLsKnUS49AIhAJIOijUeED7ZimAJ09DWGbXkYTkRqsGch6d5rgMSYa/F","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"lib/index.js","_from":".","_shasum":"7b4006f1d622e45c4e15f21f7adc4c7f71b338b2","gitHead":"515ccd3868b5a7d4781578fec174bb4929965a01","scripts":{"flow":"node -e \"process.exit(process.platform === 'win32' ? 0 : 1)\" || flow check","lint":"builder concurrent lint-server lint-client lint-client-test flow","test":"builder run npm:test","version":"builder run npm:version","build-lib":"builder run clean-lib && babel plugins/src -d plugins/lib --copy-files && babel src -d lib --copy-files","preversion":"builder run npm:preversion","postinstall":"cd lib || builder run npm:postinstall || (echo 'POSTINSTALL FAILED: If using npm v2, please upgrade to npm v3. See bug https://github.com/FormidableLabs/builder/issues/35' && exit 1)"},"_npmUser":{"name":"tptee","email":"tyler@tylerpaulthompson.com"},"repository":{"url":"git+https://github.com/FormidableLabs/radium-constraints.git","type":"git"},"_npmVersion":"3.7.3","description":"Constraint-based layout system for React components.","directories":{},"_nodeVersion":"4.4.1","dependencies":{"react":"^0.14.7","builder":"^2.8.0","coveralls":"^2.11.8","react-dom":"^0.14.7","autolayout":"github:formidablelabs/autolayout.js#7a28278","builder-radium-component":"^2.0.0","babel-plugin-webpack-loaders":"^0.4.0"},"devDependencies":{"chai":"^3.2.0","mocha":"^2.3.3","react":"^0.14.6","sinon":"^1.17.2","enzyme":"^2.1.0","builder":"^2.8.0","flow-bin":"^0.22.1","react-dom":"^0.14.6","sinon-chai":"^2.8.0","babel-eslint":"^6.0.0","babel-polyfill":"^6.6.1","babel-register":"^6.6.0","exports-loader":"^0.6.3","webpack-dev-server":"^1.14.1","babel-preset-es2015":"^6.6.0","eslint-plugin-flow-vars":"^0.2.1","react-addons-test-utils":"^0.14.7","builder-radium-component-dev":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/radium-constraints-0.2.0.tgz_1459451006418_0.481768800644204","host":"packages-12-west.internal.npmjs.com"}},"0.3.0":{"name":"radium-constraints","version":"0.3.0","author":{"name":"Tyler Thompson"},"license":"MIT","_id":"radium-constraints@0.3.0","maintainers":[{"name":"formidable","email":"admin@formidablelabs.com"},{"name":"tptee","email":"tyler@tylerpaulthompson.com"}],"homepage":"https://github.com/FormidableLabs/radium-constraints","bugs":{"url":"https://github.com/FormidableLabs/radium-constraints/issues"},"dist":{"shasum":"ef55367c6f088d23bab3160227c2db2e30a6f87b","tarball":"https://registry.npmjs.org/radium-constraints/-/radium-constraints-0.3.0.tgz","integrity":"sha512-KtXlsF8oiYblnPJLbivvcQ4keaP0HAX2ILoxWSdyQvW52ptyJ/wdue0qdSkjFeFREhbZI/eeWqrCz4Fm8NppHw==","signatures":[{"sig":"MEUCIQDtpF55FM531b1zas0369NVjPWDLsyh+diB8AwnW8DdBAIgBfB/1hgzawANbH3fW2tIH2H+DRxFcG/KrT9lGOwjemQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"lib/index.js","_from":".","_shasum":"ef55367c6f088d23bab3160227c2db2e30a6f87b","gitHead":"fb1558707fbf83d44198a084cce03b3420a71df9","scripts":{"flow":"node -e \"process.exit(process.platform === 'win32' ? 0 : 1)\" || flow check","lint":"builder concurrent lint-server lint-client lint-client-test flow","test":"builder run npm:test","version":"builder run npm:version","build-lib":"builder run clean-lib && babel plugins/src -d plugins/lib --copy-files && babel src -d lib --copy-files","preversion":"builder run npm:preversion","postinstall":"cd lib || builder run npm:postinstall || (echo 'POSTINSTALL FAILED: If using npm v2, please upgrade to npm v3. See bug https://github.com/FormidableLabs/builder/issues/35' && exit 1)"},"_npmUser":{"name":"tptee","email":"tyler@tylerpaulthompson.com"},"repository":{"url":"git+https://github.com/FormidableLabs/radium-constraints.git","type":"git"},"_npmVersion":"3.7.3","description":"Constraint-based layout system for React components.","directories":{},"_nodeVersion":"4.4.1","dependencies":{"react":"^0.14.7","builder":"^2.8.0","coveralls":"^2.11.8","react-dom":"^0.14.7","autolayout":"github:formidablelabs/autolayout.js#7a28278","builder-radium-component":"^2.0.0","babel-plugin-webpack-loaders":"^0.4.0"},"devDependencies":{"chai":"^3.2.0","mocha":"^2.3.3","react":"^0.14.6","sinon":"^1.17.2","enzyme":"^2.1.0","builder":"^2.8.0","flow-bin":"^0.22.1","react-dom":"^0.14.6","sinon-chai":"^2.8.0","babel-eslint":"^6.0.0","babel-polyfill":"^6.6.1","babel-register":"^6.6.0","exports-loader":"^0.6.3","webpack-dev-server":"^1.14.1","babel-preset-es2015":"^6.6.0","eslint-plugin-flow-vars":"^0.2.1","react-addons-test-utils":"^0.14.7","builder-radium-component-dev":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/radium-constraints-0.3.0.tgz_1459455442209_0.4334558299742639","host":"packages-12-west.internal.npmjs.com"}},"0.3.1":{"name":"radium-constraints","version":"0.3.1","author":{"name":"Tyler Thompson"},"license":"MIT","_id":"radium-constraints@0.3.1","maintainers":[{"name":"formidable","email":"admin@formidablelabs.com"},{"name":"tptee","email":"tyler@tylerpaulthompson.com"}],"homepage":"https://github.com/FormidableLabs/radium-constraints","bugs":{"url":"https://github.com/FormidableLabs/radium-constraints/issues"},"dist":{"shasum":"59b2a16fc19714eb14ef16350e73e97e75dedd66","tarball":"https://registry.npmjs.org/radium-constraints/-/radium-constraints-0.3.1.tgz","integrity":"sha512-1mh0VZdLZWmdjo3gYadJXopYHNubCCJo3kKXTellg3kFaGANicGz6XlMUtgaaC5HjSf1tQTGcULBJWc+/tSSxw==","signatures":[{"sig":"MEQCIAjvW+xOWoWgyFRkvFZmnitU/rehN3oWMnK1P1YyhcFSAiA7OezXs7V6DxmxXWI+bRkZxUleGrfKireXeTEWVlqx8w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"lib/index.js","_from":".","_shasum":"59b2a16fc19714eb14ef16350e73e97e75dedd66","gitHead":"3779f86ef4fe978c1bbaa492beefed6ece0c3d14","scripts":{"flow":"node -e \"process.exit(process.platform === 'win32' ? 0 : 1)\" || flow check","lint":"builder concurrent lint-server lint-client lint-client-test flow","test":"builder run npm:test","version":"builder run npm:version","build-lib":"builder run clean-lib && babel plugins/src -d plugins/lib --copy-files && babel src -d lib --copy-files","preversion":"builder run npm:preversion","postinstall":"cd lib || builder run npm:postinstall || (echo 'POSTINSTALL FAILED: If using npm v2, please upgrade to npm v3. See bug https://github.com/FormidableLabs/builder/issues/35' && exit 1)"},"_npmUser":{"name":"tptee","email":"tyler@tylerpaulthompson.com"},"repository":{"url":"git+https://github.com/FormidableLabs/radium-constraints.git","type":"git"},"_npmVersion":"3.8.3","description":"Constraint-based layout system for React components.","directories":{},"_nodeVersion":"4.4.1","dependencies":{"react":"^0.14.7","builder":"^2.8.0","coveralls":"^2.11.8","react-dom":"^0.14.7","autolayout":"github:formidablelabs/autolayout.js#7a28278","builder-radium-component":"^2.0.0","babel-plugin-webpack-loaders":"^0.4.0"},"devDependencies":{"chai":"^3.2.0","mocha":"^2.3.3","react":"^0.14.6","sinon":"^1.17.2","enzyme":"^2.1.0","builder":"^2.8.0","flow-bin":"^0.22.1","react-dom":"^0.14.6","sinon-chai":"^2.8.0","babel-eslint":"^6.0.0","babel-polyfill":"^6.6.1","babel-register":"^6.6.0","exports-loader":"^0.6.3","webpack-dev-server":"^1.14.1","babel-preset-es2015":"^6.6.0","eslint-plugin-flow-vars":"^0.2.1","react-addons-test-utils":"^0.14.7","builder-radium-component-dev":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/radium-constraints-0.3.1.tgz_1459877836325_0.07105069258250296","host":"packages-12-west.internal.npmjs.com"}},"0.4.0":{"name":"radium-constraints","version":"0.4.0","author":{"name":"Tyler Thompson"},"license":"MIT","_id":"radium-constraints@0.4.0","maintainers":[{"name":"formidable","email":"admin@formidablelabs.com"},{"name":"tptee","email":"tyler@tylerpaulthompson.com"}],"homepage":"https://github.com/FormidableLabs/radium-constraints","bugs":{"url":"https://github.com/FormidableLabs/radium-constraints/issues"},"dist":{"shasum":"387a242f0d75ab4ba03bbe4e41c678f602acba6f","tarball":"https://registry.npmjs.org/radium-constraints/-/radium-constraints-0.4.0.tgz","integrity":"sha512-BPLv9ZsAzFpVkgeMevGh4xL5Vt5+HTuug3ZMRO4JZyYpsEFkh+lmQghujdHzt/8fIgwma8o04wt9uEM/B2rfHw==","signatures":[{"sig":"MEQCIEVj1EoGb0XGjBFdVCLPW5XhVInIzU2EmaXcAXacEvL6AiA6tj0vpKIpc1HgynBWABwheuIkfZ7vr+vtH1ldgRopsw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"lib/index.js","_from":".","_shasum":"387a242f0d75ab4ba03bbe4e41c678f602acba6f","gitHead":"983f0ec6c71108c47c5815fee7fbe68e380c6b4a","scripts":{"flow":"node -e \"process.exit(process.platform === 'win32' ? 0 : 1)\" || flow check","lint":"builder concurrent lint-server lint-client lint-client-test flow","test":"builder run npm:test","version":"builder run npm:version","build-lib":"builder run clean-lib && babel plugins/src -d plugins/lib --copy-files && babel src -d lib --copy-files","preversion":"builder run npm:preversion","postinstall":"cd lib || builder run npm:postinstall || (echo 'POSTINSTALL FAILED: If using npm v2, please upgrade to npm v3. See bug https://github.com/FormidableLabs/builder/issues/35' && exit 1)"},"_npmUser":{"name":"tptee","email":"tyler@tylerpaulthompson.com"},"repository":{"url":"git+https://github.com/FormidableLabs/radium-constraints.git","type":"git"},"_npmVersion":"3.8.7","description":"Constraint-based layout system for React components.","directories":{},"_nodeVersion":"4.4.1","dependencies":{"react":"^0.14.7","builder":"^2.8.0","coveralls":"^2.11.8","react-dom":"^0.14.7","autolayout":"github:formidablelabs/autolayout.js#7a28278","builder-radium-component":"^2.0.0","babel-plugin-webpack-loaders":"^0.4.0"},"devDependencies":{"chai":"^3.2.0","mocha":"^2.3.3","react":"^0.14.6","sinon":"^1.17.2","enzyme":"^2.1.0","builder":"^2.8.0","flow-bin":"^0.22.1","react-dom":"^0.14.6","sinon-chai":"^2.8.0","babel-eslint":"^6.0.0","babel-polyfill":"^6.6.1","babel-register":"^6.6.0","exports-loader":"^0.6.3","webpack-dev-server":"^1.14.1","babel-preset-es2015":"^6.6.0","eslint-plugin-flow-vars":"^0.2.1","react-addons-test-utils":"^0.14.7","builder-radium-component-dev":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/radium-constraints-0.4.0.tgz_1460935458391_0.9064737404696643","host":"packages-16-east.internal.npmjs.com"}},"0.4.1":{"name":"radium-constraints","version":"0.4.1","author":{"name":"Tyler Thompson"},"license":"MIT","_id":"radium-constraints@0.4.1","maintainers":[{"name":"formidable","email":"admin@formidablelabs.com"},{"name":"tptee","email":"tyler@tylerpaulthompson.com"}],"homepage":"https://github.com/FormidableLabs/radium-constraints","bugs":{"url":"https://github.com/FormidableLabs/radium-constraints/issues"},"dist":{"shasum":"7094bc9a74cd77925f0884269f8e0dbda2938c99","tarball":"https://registry.npmjs.org/radium-constraints/-/radium-constraints-0.4.1.tgz","integrity":"sha512-ELPzqiBRNvODUX+DH3H5qvjyP6Vay76fxtVkQ0EmMi2YGenHk3pfyoU06tPK4atsLC7Q88+zjnh9rCM/oNqoZw==","signatures":[{"sig":"MEUCIQDDyu98armIhrrLgg2qViow6A0i3XndQXYD6cQO48W7FAIgHXjo3JlbeS5iKv5SAErQnSeQ6/m2Nc8Ymf+FP44lvVk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"lib/index.js","_from":".","_shasum":"7094bc9a74cd77925f0884269f8e0dbda2938c99","gitHead":"a353cd30ec839f2be62c41878b862238f6626bbc","scripts":{"flow":"node -e \"process.exit(process.platform === 'win32' ? 0 : 1)\" || flow check","lint":"builder concurrent lint-server lint-client lint-client-test flow","test":"builder run npm:test","version":"builder run npm:version","build-lib":"builder run clean-lib && babel plugins/src -d plugins/lib --copy-files && babel src -d lib --copy-files","preversion":"builder run npm:preversion","postinstall":"cd lib || builder run npm:postinstall || (echo 'POSTINSTALL FAILED: If using npm v2, please upgrade to npm v3. See bug https://github.com/FormidableLabs/builder/issues/35' && exit 1)"},"_npmUser":{"name":"tptee","email":"tyler@tylerpaulthompson.com"},"repository":{"url":"git+https://github.com/FormidableLabs/radium-constraints.git","type":"git"},"_npmVersion":"3.8.7","description":"Constraint-based layout system for React components.","directories":{},"_nodeVersion":"4.4.1","dependencies":{"react":"^0.14.7","builder":"^2.8.0","coveralls":"^2.11.8","react-dom":"^0.14.7","autolayout":"github:formidablelabs/autolayout.js#7a28278","builder-radium-component":"^2.0.0","babel-plugin-webpack-loaders":"^0.4.0"},"devDependencies":{"chai":"^3.2.0","mocha":"^2.3.3","react":"^0.14.6","sinon":"^1.17.2","enzyme":"^2.1.0","builder":"^2.8.0","flow-bin":"^0.22.1","react-dom":"^0.14.6","sinon-chai":"^2.8.0","babel-eslint":"^6.0.0","babel-polyfill":"^6.6.1","babel-register":"^6.6.0","exports-loader":"^0.6.3","webpack-dev-server":"^1.14.1","babel-preset-es2015":"^6.6.0","eslint-plugin-flow-vars":"^0.2.1","react-addons-test-utils":"^0.14.7","builder-radium-component-dev":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/radium-constraints-0.4.1.tgz_1460940121102_0.4596561873331666","host":"packages-16-east.internal.npmjs.com"}}},"time":{"created":"2016-03-31T19:03:26.875Z","modified":"2026-07-20T21:09:22.591Z","0.2.0":"2016-03-31T19:03:26.875Z","0.3.0":"2016-03-31T20:17:22.640Z","0.3.1":"2016-04-05T17:37:16.810Z","0.4.0":"2016-04-17T23:24:19.571Z","0.4.1":"2016-04-18T00:42:02.344Z"},"bugs":{"url":"https://github.com/FormidableLabs/radium-constraints/issues"},"author":{"name":"Tyler Thompson"},"license":"MIT","homepage":"https://github.com/FormidableLabs/radium-constraints","repository":{"url":"git+https://github.com/FormidableLabs/radium-constraints.git","type":"git"},"description":"Constraint-based layout system for React components.","maintainers":[{"email":"sarahmichelleegan@gmail.com","name":"sarmeyer"},{"email":"mariano.martinez@formidable.com","name":"mariano-formidable"},{"email":"ryan@loose-bits.com","name":"ryan.roemer"},{"email":"admin@formidablelabs.com","name":"formidable-owner"},{"email":"npm@formidablelabs.com","name":"formidablelabs"},{"email":"sarah.wright@formidable.com","name":"sarahformidable"},{"email":"senesealessandro@gmail.com","name":"ceceppa"},{"email":"tyler@tylerpaulthompson.com","name":"tptee"}],"readme":"# Radium Constraints [](https://travis-ci.org/FormidableLabs/radium-constraints) [](https://coveralls.io/github/FormidableLabs/radium-constraints?branch=master)\n\nRadium Constraints introduces the power of constraint-based layout to React. Declare simple relationships between your visual components and let the constraint solver generate the optimum layout.\n\nRadium Constraints handles DOM and SVG elements and is the perfect alternative to manual layout when building SVG data visualizations. Radium Constraints is the bedrock for exciting new enhancements to [Victory](https://github.com/FormidableLabs/victory).\n\n## Pre-alpha\nThis library is still incubating and is not yet ready for production use. See the [roadmap](#roadmap) for what's left to do before 1.0.0.\n\n## Usage\n\nFirst, ensure all components using Radium Constraints are wrapped in the top-level `` component:\n\n```es6\nimport ConstraintLayout from \"radium-constraints\";\n\n\n ...other components\n\n```\n\nNext, add a `` component. A `` is a collection of \"subviews\" whose layouts relate to each other and their parent. A `` typically encapsulates one large visual component, like a single chart.\n\nSuperviews require the following props:\n- `name`: for identification. We'll remove this requirement in future versions.\n- `container` which element the superview should use as a container (i.e. `div` for DOM and `g` for SVG).\n- `width`: the initial width of the superview.\n- `height`: the initial height of the superview.\n- `style` (optional) custom styles to apply to the container node.\n\nHere's how to set up a ``:\n\n```es6\nimport ConstraintLayout, { Superview } from \"radium-constraints\";\n\n\n \n ...subview components\n \n\n```\n\nFinally, add subviews to your ``! You can create subviews in two ways. The first, `AutoDOM` and `AutoSVG`, automatically map the bounding box of the subview to the appropriate DOM styles/SVG attributes. AutoDOM uses the bounding box to absolutely position the element. `AutoSVG` maps the bounding box to attributes like `x, y, x1, y1, cx, cy, r`, etc. on a per-element basis.\n\nIf you need more control over the usage of the bounding box in components, you can create a custom subview using the `` higher-order component. `` provides layout props (width, height, top, left, bottom, right) that you can map to DOM attributes or `style` props.\n\nBoth of these methods use `` under the covers, and they require the same props:\n - `name`: the name of the subview. Allows other subviews to constrain themselves to this subview.\n - `intrinsicWidth`: the minimum width of the component before application of constraints.\n - `intrinsicHeight`: the minimum height of the component before application of constraints.\n - `constraints`: a set of constraints for this subview.\n\nBuilding constraints uses a fluent DSL in the style of Chai assertions. Some constraint examples:\n\n```es6\n\n// These two constraints center the subview in the .\nconstrain.subview(\"demo\").centerX.to.equal.superview.centerX\nconstrain.subview(\"demo\").centerY.to.equal.superview.centerY\n\n// This prevents this subview from overlapping with\n// another subview named \"other\".\nconstrain.subview(\"demo\").left\n .to.be.greaterThanOrEqualTo.subview(\"other\").right\n\n// This prevents this subview from overflowing\n// the superview's right edge.\nconstrain.subview(\"demo\").right\n .to.be.lessThanOrEqualTo.superview.right\n```\n\nHere's an example of a custom component using ``:\n\n```es6\nclass Rectangle extends Component {\n static propTypes = {\n layout: PropTypes.shape({\n top: PropTypes.number,\n right: PropTypes.number,\n bottom: PropTypes.number,\n left: PropTypes.number\n })\n };\n\n render() {\n return (\n
\n
Demo time!
\n
\n );\n }\n}\n\nexport default Subview(Rectangle);\n```\n\nHere's how to use `AutoDOM` components:\n\n```es6\nimport ConstraintLayout, { Superview, AutoDOM } from \"radium-constraints\";\n\n\n \n \n This is a subview\n \n \n\n```\n\nWhen using `AutoSVG` components, make sure to pass \"g\" instead of \"div\" to the ``'s `container` prop.\n\n## Demo\nThere are more complex examples on the demo page. Check out the code in [app.jsx](https://github.com/FormidableLabs/radium-constraints/blob/master/demo/app.jsx).\n\n### Installation\n- Clone this repo\n- `npm install` and then `./node_modules/.bin/builder run hot` will load a webpack dev server at localhost:3000.\n\nIf you want to type `builder` instead of\n`./node_modules/.bin/builder`, please update your shell to include\n`./node_modules/.bin` in `PATH` like:\n\n```sh\nexport PATH=\"${PATH}:./node_modules/.bin\"\n```\n\n## Caveats\nReact Constraints uses an asynchronous layout engine running on a pool of WebWorkers. This prevents layout calculations from bogging down the main thread and allows the library to be a good citizen in any page/app. Therefore, browsers using this library must support WebWorkers.\n\nResolving and incrementally adding/removing constraints are cheap enough to run in 60fps for most cases. However, the initial layout calculations on first load are the most expensive, and you may notice a slight delay in layout (although this does not block the main thread). We're working on a build tool that will pre-calculate initial layouts and feed them into your components to prevent this.\n\n## Browser support\nThis library's browser support aligns with React's browser support minus IE 8 and 9 (neither support Web Workers.) The library requires no polyfills for its supported environments.\n\nWe _may_ investigate integrating a sham Web Worker for IE 9 support.\n\n## Roadmap \nIn order of priority:\n- Remove dependency on autolayout.js in favor of a simple wrapper around the Kiwi constraint solver.\n- Support SVG `path` elements in AutoSVG.\n- Create build tool to pre-calculate initial layouts.\n- Decide on an animation strategy (requires support for removing constraints).\n- Allow for self-referential subviews in the constraint props array without using the subview string.\n","readmeFilename":"README.md"}