{"_id":"@mapbox/react-simple-surveyor","_rev":"408329","name":"@mapbox/react-simple-surveyor","description":"Simple higher-order React component for measuring a component's available width","dist-tags":{"latest":"1.0.0"},"maintainers":[{"name":"mapbox-machine-user","email":"accounts+npm-mapbox-machine-user@mapbox.com"},{"name":"mapbox-npm","email":"accounts+npmjs@mapbox.com"},{"name":"mapbox-npm-01","email":"accounts+npmjs-01@mapbox.com"},{"name":"mapbox-npm-02","email":"accounts+npmjs-02@mapbox.com"},{"name":"mapbox-npm-03","email":"accounts+npmjs-03@mapbox.com"},{"name":"mapbox-npm-04","email":"accounts+npmjs-04@mapbox.com"},{"name":"mapbox-npm-08","email":"accounts+npmjs-08@mapbox.com"},{"name":"mapbox-npm-09","email":"accounts+npmjs-09@mapbox.com"},{"name":"mapbox-npm-ci","email":"accounts+npmjs-npm-ci@mapbox.com"}],"time":{"modified":"2021-08-04T04:58:08.000Z","created":"2017-06-13T02:07:54.910Z","1.0.0":"2017-09-08T19:29:36.928Z","0.1.1":"2017-06-24T22:57:13.514Z","0.1.0":"2017-06-13T02:07:54.910Z"},"users":{},"author":{"name":"Mapbox"},"repository":{"type":"git","url":"git+https://github.com/mapbox/react-simple-surveyor.git"},"versions":{"1.0.0":{"name":"@mapbox/react-simple-surveyor","version":"1.0.0","description":"Simple higher-order React component for measuring a component's available width","main":"dist/survey.js","scripts":{"precommit":"lint-staged","lint":"eslint .","format":"prettier --single-quote --write '{,src/,test/}**/*.js'","build":"rm -rf dist && babel src -d dist","start":"budo test/test.js -d -l -o -- -t babelify","test":"npm run start","prepublish":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/mapbox/react-simple-surveyor.git"},"keywords":["react","higher-order-component","measure","width"],"author":{"name":"Mapbox"},"license":"MIT","bugs":{"url":"https://github.com/mapbox/react-simple-surveyor/issues"},"homepage":"https://github.com/mapbox/react-simple-surveyor#readme","devDependencies":{"babel-cli":"^6.24.1","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","babelify":"^7.3.0","budo":"^10.0.3","eslint":"^4.0.0","husky":"^0.14.1","lint-staged":"^4.0.0","prettier":"^1.4.4","react":"^15.5.4","react-dom":"^15.5.4"},"dependencies":{"debounce":"^1.0.2"},"peerDependencies":{"react":">=15.0.0","react-dom":">=15.0.0"},"lint-staged":{"{,src/,test/}**/*.js":["prettier --single-quote --write","git add"]},"babel":{"presets":["es2015","react"]},"gitHead":"dd4fde3f116834ee5f760e37524e00986b02a772","_id":"@mapbox/react-simple-surveyor@1.0.0","_npmVersion":"5.4.1","_nodeVersion":"6.11.1","_npmUser":{"name":"davidtheclark","email":"david.dave.clark@gmail.com"},"dist":{"shasum":"2bf8df67dfcc7d7df90fd03f7695ad227d76c58c","size":5286,"noattachment":false,"key":"/@mapbox/react-simple-surveyor/-/@mapbox/react-simple-surveyor-1.0.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/@mapbox/react-simple-surveyor/download/@mapbox/react-simple-surveyor-1.0.0.tgz"},"maintainers":[{"name":"mapbox-machine-user","email":"accounts+npm-mapbox-machine-user@mapbox.com"},{"name":"mapbox-npm","email":"accounts+npmjs@mapbox.com"},{"name":"mapbox-npm-01","email":"accounts+npmjs-01@mapbox.com"},{"name":"mapbox-npm-02","email":"accounts+npmjs-02@mapbox.com"},{"name":"mapbox-npm-03","email":"accounts+npmjs-03@mapbox.com"},{"name":"mapbox-npm-04","email":"accounts+npmjs-04@mapbox.com"},{"name":"mapbox-npm-08","email":"accounts+npmjs-08@mapbox.com"},{"name":"mapbox-npm-09","email":"accounts+npmjs-09@mapbox.com"},{"name":"mapbox-npm-ci","email":"accounts+npmjs-npm-ci@mapbox.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-simple-surveyor-1.0.0.tgz_1504898976820_0.7108337667305022"},"directories":{},"publish_time":1504898976928,"_hasShrinkwrap":false,"_cnpm_publish_time":1504898976928},"0.1.1":{"name":"@mapbox/react-simple-surveyor","version":"0.1.1","description":"Simple higher-order React component for measuring a component's available width","main":"dist/survey.js","scripts":{"precommit":"lint-staged","lint":"eslint .","format":"prettier --single-quote --write '{,src/,test/}**/*.js'","build":"rm -rf dist && babel src -d dist","start":"budo test/test.js -d -l -o -- -t babelify","test":"npm run start","prepublish":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/mapbox/react-simple-surveyor.git"},"keywords":["react","higher-order-component","measure","width"],"author":{"name":"Mapbox"},"license":"MIT","bugs":{"url":"https://github.com/mapbox/react-simple-surveyor/issues"},"homepage":"https://github.com/mapbox/react-simple-surveyor#readme","devDependencies":{"babel-cli":"^6.24.1","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","babelify":"^7.3.0","budo":"^10.0.3","eslint":"^4.0.0","husky":"^0.14.1","lint-staged":"^4.0.0","prettier":"^1.4.4","react":"^15.5.4","react-dom":"^15.5.4"},"dependencies":{"debounce":"^1.0.2"},"peerDependencies":{"react":">=15.0.0","react-dom":">=15.0.0"},"lint-staged":{"{,src/,test/}**/*.js":["prettier --single-quote --write","git add"]},"babel":{"presets":["es2015","react"]},"gitHead":"ed5f0ee8074389a51de4f22388aa1ebece1377c5","_id":"@mapbox/react-simple-surveyor@0.1.1","_npmVersion":"5.0.3","_nodeVersion":"6.11.0","_npmUser":{"name":"davidtheclark","email":"david.dave.clark@gmail.com"},"dist":{"shasum":"c43b098a876bbc4a548334ccd1ae512736973a7e","size":41156,"noattachment":false,"key":"/@mapbox/react-simple-surveyor/-/@mapbox/react-simple-surveyor-0.1.1.tgz","tarball":"http://registry.cnpm.dingdandao.com/@mapbox/react-simple-surveyor/download/@mapbox/react-simple-surveyor-0.1.1.tgz"},"maintainers":[{"name":"mapbox-machine-user","email":"accounts+npm-mapbox-machine-user@mapbox.com"},{"name":"mapbox-npm","email":"accounts+npmjs@mapbox.com"},{"name":"mapbox-npm-01","email":"accounts+npmjs-01@mapbox.com"},{"name":"mapbox-npm-02","email":"accounts+npmjs-02@mapbox.com"},{"name":"mapbox-npm-03","email":"accounts+npmjs-03@mapbox.com"},{"name":"mapbox-npm-04","email":"accounts+npmjs-04@mapbox.com"},{"name":"mapbox-npm-08","email":"accounts+npmjs-08@mapbox.com"},{"name":"mapbox-npm-09","email":"accounts+npmjs-09@mapbox.com"},{"name":"mapbox-npm-ci","email":"accounts+npmjs-npm-ci@mapbox.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-simple-surveyor-0.1.1.tgz_1498345033331_0.5408437948208302"},"directories":{},"publish_time":1498345033514,"_hasShrinkwrap":false,"_cnpm_publish_time":1498345033514},"0.1.0":{"name":"@mapbox/react-simple-surveyor","version":"0.1.0","description":"Simple higher-order React component for measuring a component's available width","main":"dist/survey.js","scripts":{"precommit":"lint-staged","lint":"eslint .","format":"prettier --single-quote --write '{{src,test}/**/*.js, index.js}'","build":"rm -rf dist && babel src -d dist","start":"budo test/test.js -d -l -o -- -t babelify","test":"start","prepublish":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/mapbox/react-simple-surveyor.git"},"keywords":["react","higher-order-component","measure","width"],"author":{"name":"Mapbox"},"license":"MIT","bugs":{"url":"https://github.com/mapbox/react-simple-surveyor/issues"},"homepage":"https://github.com/mapbox/react-simple-surveyor#readme","devDependencies":{"babel-cli":"^6.24.1","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","babelify":"^7.3.0","budo":"^10.0.3","eslint":"^4.0.0","eslint-plugin-react":"^7.0.1","husky":"^0.13.4","lint-staged":"^3.6.1","prettier":"^1.4.4","react":"^15.5.4","react-dom":"^15.5.4"},"dependencies":{"debounce":"^1.0.2"},"peerDependencies":{"react":">=15.0.0","react-dom":">=15.0.0"},"lint-staged":{"{{src,test}/**/*.js, index.js}":["prettier --single-quote --write","git add"]},"babel":{"presets":["es2015","react"]},"gitHead":"19121c168dec562348926943107a46c79f013971","_id":"@mapbox/react-simple-surveyor@0.1.0","_npmVersion":"5.0.3","_nodeVersion":"6.10.0","_npmUser":{"name":"davidtheclark","email":"david.dave.clark@gmail.com"},"dist":{"shasum":"ff1eb0c11c961e773a178e200ca5a2b821073111","size":40765,"noattachment":false,"key":"/@mapbox/react-simple-surveyor/-/@mapbox/react-simple-surveyor-0.1.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/@mapbox/react-simple-surveyor/download/@mapbox/react-simple-surveyor-0.1.0.tgz"},"maintainers":[{"name":"mapbox-machine-user","email":"accounts+npm-mapbox-machine-user@mapbox.com"},{"name":"mapbox-npm","email":"accounts+npmjs@mapbox.com"},{"name":"mapbox-npm-01","email":"accounts+npmjs-01@mapbox.com"},{"name":"mapbox-npm-02","email":"accounts+npmjs-02@mapbox.com"},{"name":"mapbox-npm-03","email":"accounts+npmjs-03@mapbox.com"},{"name":"mapbox-npm-04","email":"accounts+npmjs-04@mapbox.com"},{"name":"mapbox-npm-08","email":"accounts+npmjs-08@mapbox.com"},{"name":"mapbox-npm-09","email":"accounts+npmjs-09@mapbox.com"},{"name":"mapbox-npm-ci","email":"accounts+npmjs-npm-ci@mapbox.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-simple-surveyor-0.1.0.tgz_1497319674800_0.7464790493249893"},"directories":{},"publish_time":1497319674910,"_hasShrinkwrap":false,"_cnpm_publish_time":1497319674910}},"readme":"# @mapbox/react-simple-surveyor\n\nSimple higher-order React component for simple measurements of a component's available width.\n\n![simple surveyors](https://nationalmap.gov/ustopo/images/old_survey_team.jpg)\n\n## Usage\n\n```jsx\nconst survey = require('@mapbox/react-simple-surveyor');\n\nfunction Original(props) {\n  // The wrapped component receives a `width` prop,\n  // telling it how much width is available to it.\n  return <div>Available width: {props.width}px.</div>;\n}\n\nconst Surveyed = survey(Original);\n\n// When the window is resized, the width is resurveyed.\n// You can also trigger a resurvey manually, on all surveyed components,\n// when there are programmatic layout changes.\nsurvey.resurvey();\n\n// All props provided to `Surveyed` will be passed along\n// to your `Original` component.\n<Surveyed className=\"green\" aria-label=\"green box\" title=\"Green!\" />;\n\n// Your `Original` component is available on the\n// `WrappedComponent` static property of the returned\n// React component class.\nSurveyed.WrappedComponent === Original;\n```\n\n## Details and caveats\n\n- Built for block-level elements, since those are the ones whose width is determined by their container.\n  *Wraps your component in a `<div>`.*\n- Upon mounting, initially renders an empty `<div>`.\n  This makes no perceptible difference for the user, but might affect some other complicated stuff you have going on.\n\n## Why use this instead of the many other dimension-measuring higher-order components?\n\nThere are lots of other modules that do similar things: react-measure, react-dimensions, react-measure-it, react-with-dimension, react-container-dimensions, react-element-queries, react-element-query, etc.\n\nThis module's goal is to provide the smallest and simplest way to measure the available width.\nPretty much all of the other modules I've found are larger and more ambitious.\nThe fundamental problems of measuring are not super difficult, so I think that a variety of modules with different APIs are kind of inevitable.\n\nThe closest I've found to this module's simplicity is react-with-available-width.\n\nIf this module doesn't suit your needs, you should try one of the others!\n\n## Development\n\nThe most efficient way to test this module is with a quick manual review.\nSo `npm start` or `npm test` both start a development server that shows a page of test cases.\nCheck these before you commit changes.\nAdd more test cases as needed.\n","_attachments":{},"homepage":"https://github.com/mapbox/react-simple-surveyor#readme","bugs":{"url":"https://github.com/mapbox/react-simple-surveyor/issues"},"license":"MIT"}