{"_id":"@mapbox/appropriate-images-react","_rev":"402804","name":"@mapbox/appropriate-images-react","description":"Examples showing how to use the resized, optimized images that you generated with appropriate-images in React","dist-tags":{"latest":"2.2.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:37:19.000Z","created":"2017-07-06T00:00:49.311Z","2.2.0":"2021-05-07T13:18:06.005Z","2.1.0":"2021-03-31T12:51:19.996Z","2.0.0":"2020-12-21T21:36:02.804Z","1.0.0":"2017-09-08T23:09:02.584Z","0.1.2":"2017-07-13T00:43:37.971Z","0.1.1":"2017-07-12T00:21:44.862Z","0.1.0":"2017-07-06T00:00:49.311Z"},"users":{},"author":{"name":"Mapbox"},"repository":{"type":"git","url":"git+https://github.com/mapbox/appropriate-images-react.git"},"versions":{"2.2.0":{"name":"@mapbox/appropriate-images-react","version":"2.2.0","description":"Examples showing how to use the resized, optimized images that you generated with appropriate-images in React","main":"dist/index.js","scripts":{"start":"webpack-dev-server","format":"prettier --single-quote --write '{,src/**/}*.js'","lint":"eslint .","test-jest":"jest","pretest":"npm run lint","test":"jest","build":"babel src --out-dir dist","prepublishOnly":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/mapbox/appropriate-images-react.git"},"keywords":["appropriate-images","responsive","images","react"],"author":{"name":"Mapbox"},"license":"MIT","bugs":{"url":"https://github.com/mapbox/appropriate-images-react/issues"},"homepage":"https://github.com/mapbox/appropriate-images-react#readme","dependencies":{"@mapbox/appropriate-images-get-url":"^1.1.0","@mapbox/react-simple-surveyor":"^1.0.0"},"devDependencies":{"@babel/cli":"^7.13.16","@babel/preset-env":"^7.14.1","@babel/preset-react":"^7.13.13","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.6","enzyme-to-json":"^3.6.2","eslint":"^7.25.0","eslint-plugin-react":"^7.23.2","husky":"^4.3.8","jest":"^26.6.3","lint-staged":"^10.5.4","prettier":"^2.2.1","prop-types":"^15.7.2","react":"^16.14.0","react-dom":"^16.14.0","react-test-renderer":"^16.14.0"},"lint-staged":{"**/*.js":["eslint","prettier --single-quote --write","git add"]},"babel":{"presets":["@babel/preset-env","@babel/react"]},"jest":{"coverageReporters":["json","lcov","text","html"],"clearMocks":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"gitHead":"94be8bea75fd7d57985c524e4fedc4bba6068ab9","_id":"@mapbox/appropriate-images-react@2.2.0","_nodeVersion":"12.18.3","_npmVersion":"6.14.11","dist":{"shasum":"459b648299c80f7389e911a306705d44ff7ee927","size":5360,"noattachment":false,"key":"/@mapbox/appropriate-images-react/-/@mapbox/appropriate-images-react-2.2.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/@mapbox/appropriate-images-react/download/@mapbox/appropriate-images-react-2.2.0.tgz"},"_npmUser":{"name":"mapbox-npm-07","email":"accounts+npmjs-07@mapbox.com"},"directories":{},"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/appropriate-images-react_2.2.0_1620393485866_0.9388927178039037"},"_hasShrinkwrap":false,"publish_time":1620393486005,"_cnpm_publish_time":1620393486005},"2.1.0":{"name":"@mapbox/appropriate-images-react","version":"2.1.0","description":"Examples showing how to use the resized, optimized images that you generated with appropriate-images in React","main":"dist/index.js","scripts":{"start":"webpack-dev-server","format":"prettier --single-quote --write '{,src/**/}*.js'","lint":"eslint .","test-jest":"jest","pretest":"npm run lint","test":"jest","build":"babel src --out-dir dist","prepublishOnly":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/mapbox/appropriate-images-react.git"},"keywords":["appropriate-images","responsive","images","react"],"author":{"name":"Mapbox"},"license":"MIT","bugs":{"url":"https://github.com/mapbox/appropriate-images-react/issues"},"homepage":"https://github.com/mapbox/appropriate-images-react#readme","dependencies":{"@mapbox/appropriate-images-get-url":"^1.1.0","@mapbox/react-simple-surveyor":"^1.0.0"},"devDependencies":{"@babel/cli":"^7.13.14","@babel/preset-env":"^7.13.12","@babel/preset-react":"^7.13.13","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.6","enzyme-to-json":"^3.6.1","eslint":"^7.23.0","eslint-plugin-react":"^7.23.1","husky":"^4.3.8","jest":"^26.6.3","lint-staged":"^10.5.4","prettier":"^2.2.1","prop-types":"^15.7.2","react":"^16.14.0","react-dom":"^16.14.0","react-test-renderer":"^16.14.0"},"lint-staged":{"**/*.js":["eslint","prettier --single-quote --write","git add"]},"babel":{"presets":["@babel/preset-env","@babel/react"]},"jest":{"coverageReporters":["json","lcov","text","html"],"clearMocks":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"gitHead":"5c3527fbb92fae195be3598091f135f3e383f6e9","_id":"@mapbox/appropriate-images-react@2.1.0","_nodeVersion":"12.18.3","_npmVersion":"6.14.11","dist":{"shasum":"3c8a0622ec5e8eecb349121137c3eef81fedb623","size":5352,"noattachment":false,"key":"/@mapbox/appropriate-images-react/-/@mapbox/appropriate-images-react-2.1.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/@mapbox/appropriate-images-react/download/@mapbox/appropriate-images-react-2.1.0.tgz"},"_npmUser":{"name":"mapbox-npm-01","email":"accounts+npmjs-01@mapbox.com"},"directories":{},"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/appropriate-images-react_2.1.0_1617195079842_0.3332317817592845"},"_hasShrinkwrap":false,"publish_time":1617195079996,"_cnpm_publish_time":1617195079996},"2.0.0":{"name":"@mapbox/appropriate-images-react","version":"2.0.0","description":"Examples showing how to use the resized, optimized images that you generated with appropriate-images in React","main":"dist/index.js","scripts":{"start":"webpack-dev-server","format":"prettier --single-quote --write '{,src/**/}*.js'","lint":"eslint .","test-jest":"jest","pretest":"npm run lint","test":"jest","build":"babel src --out-dir dist","prepublishOnly":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/mapbox/appropriate-images-react.git"},"keywords":["appropriate-images","responsive","images","react"],"author":{"name":"Mapbox"},"license":"MIT","bugs":{"url":"https://github.com/mapbox/appropriate-images-react/issues"},"homepage":"https://github.com/mapbox/appropriate-images-react#readme","dependencies":{"@mapbox/appropriate-images-get-url":"^1.0.0","@mapbox/react-simple-surveyor":"^1.0.0"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.5","enzyme-to-json":"^3.6.1","eslint":"^7.16.0","eslint-plugin-react":"^7.21.5","husky":"^4.3.6","jest":"^26.6.3","lint-staged":"^10.5.3","prettier":"^2.2.1","prop-types":"^15.7.2","react":"^16.14.0","react-dom":"^16.14.0","react-test-renderer":"^16.14.0"},"lint-staged":{"**/*.js":["eslint","prettier --single-quote --write","git add"]},"babel":{"presets":["@babel/preset-env","@babel/react"]},"jest":{"coverageReporters":["json","lcov","text","html"],"clearMocks":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"gitHead":"eda57f245228ba27f840877bdb638b8d9cc7c2bb","_id":"@mapbox/appropriate-images-react@2.0.0","_nodeVersion":"12.18.3","_npmVersion":"6.14.6","dist":{"shasum":"8c43ffd715557911a61d9e78b174308d2eeba735","size":5335,"noattachment":false,"key":"/@mapbox/appropriate-images-react/-/@mapbox/appropriate-images-react-2.0.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/@mapbox/appropriate-images-react/download/@mapbox/appropriate-images-react-2.0.0.tgz"},"_npmUser":{"name":"mapbox-npm-05","email":"accounts+npmjs-05@mapbox.com"},"directories":{},"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/appropriate-images-react_2.0.0_1608586562691_0.7254579189055343"},"_hasShrinkwrap":false,"publish_time":1608586562804,"_cnpm_publish_time":1608586562804},"1.0.0":{"name":"@mapbox/appropriate-images-react","version":"1.0.0","description":"Examples showing how to use the resized, optimized images that you generated with appropriate-images in React","main":"dist/index.js","files":["dist"],"scripts":{"start":"webpack-dev-server","precommit":"lint-staged","format":"prettier --single-quote --write '{,src/**/}*.js'","lint":"eslint .","test-jest":"jest","pretest":"npm run lint","test":"jest","build":"babel src --out-dir dist","prepublishOnly":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/mapbox/appropriate-images-react.git"},"keywords":["appropriate-images","responsive","images","react"],"author":{"name":"Mapbox"},"license":"MIT","bugs":{"url":"https://github.com/mapbox/appropriate-images-react/issues"},"homepage":"https://github.com/mapbox/appropriate-images-react#readme","dependencies":{"@mapbox/appropriate-images-get-url":"^0.1.1","@mapbox/react-simple-surveyor":"^0.1.1"},"devDependencies":{"babel-cli":"^6.24.1","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","enzyme":"^2.9.1","enzyme-to-json":"^1.5.1","eslint":"^4.1.0","eslint-plugin-react":"^7.1.0","husky":"^0.14.1","jest":"^20.0.4","lint-staged":"^4.0.0","prettier":"1.4.4","prop-types":"^15.5.10","react":"^15.6.1","react-dom":"^15.6.1","react-test-renderer":"^15.6.1"},"lint-staged":{"**/*.js":["eslint","prettier --single-quote --write","git add"]},"babel":{"presets":["es2015","react"]},"jest":{"coverageReporters":["json","lcov","text","html"],"clearMocks":true},"gitHead":"0d67df5d3ad145601f54a626cfd0893a2a894d6e","_id":"@mapbox/appropriate-images-react@1.0.0","_npmVersion":"5.4.1","_nodeVersion":"6.11.1","_npmUser":{"name":"davidtheclark","email":"david.dave.clark@gmail.com"},"dist":{"shasum":"a9b014565f8c4039b134db2e5032fca17b30a869","size":4849,"noattachment":false,"key":"/@mapbox/appropriate-images-react/-/@mapbox/appropriate-images-react-1.0.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/@mapbox/appropriate-images-react/download/@mapbox/appropriate-images-react-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/appropriate-images-react-1.0.0.tgz_1504912142317_0.465586150996387"},"directories":{},"publish_time":1504912142584,"_hasShrinkwrap":false,"_cnpm_publish_time":1504912142584},"0.1.2":{"name":"@mapbox/appropriate-images-react","version":"0.1.2","description":"Examples showing how to use the resized, optimized images that you generated with appropriate-images in React","main":"dist/index.js","files":["dist"],"scripts":{"start":"webpack-dev-server","precommit":"lint-staged","format":"prettier --single-quote --write '{,src/**/}*.js'","lint":"eslint .","test-jest":"jest","pretest":"npm run lint","test":"jest","build":"babel src --out-dir dist","prepublishOnly":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/mapbox/appropriate-images-react.git"},"keywords":["appropriate-images","responsive","images","react"],"author":{"name":"Mapbox"},"license":"MIT","bugs":{"url":"https://github.com/mapbox/appropriate-images-react/issues"},"homepage":"https://github.com/mapbox/appropriate-images-react#readme","dependencies":{"@mapbox/appropriate-images-get-url":"^0.1.1","@mapbox/react-simple-surveyor":"^0.1.1"},"devDependencies":{"babel-cli":"^6.24.1","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","enzyme":"^2.9.1","enzyme-to-json":"^1.5.1","eslint":"^4.1.0","eslint-plugin-react":"^7.1.0","husky":"^0.14.1","jest":"^20.0.4","lint-staged":"^4.0.0","prettier":"1.4.4","prop-types":"^15.5.10","react":"^15.6.1","react-dom":"^15.6.1","react-test-renderer":"^15.6.1"},"lint-staged":{"**/*.js":["eslint","prettier --single-quote --write","git add"]},"babel":{"presets":["es2015","react"]},"jest":{"coverageReporters":["json","lcov","text","html"],"clearMocks":true},"gitHead":"507a0764a2b45e8e3bef8c318758013aefcb4f3f","_id":"@mapbox/appropriate-images-react@0.1.2","_npmVersion":"5.2.0","_nodeVersion":"6.11.0","_npmUser":{"name":"davidtheclark","email":"david.dave.clark@gmail.com"},"dist":{"shasum":"3d5c1f9125437553358466e0d137ef9ae05f9677","size":4740,"noattachment":false,"key":"/@mapbox/appropriate-images-react/-/@mapbox/appropriate-images-react-0.1.2.tgz","tarball":"http://registry.cnpm.dingdandao.com/@mapbox/appropriate-images-react/download/@mapbox/appropriate-images-react-0.1.2.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/appropriate-images-react-0.1.2.tgz_1499906617824_0.4742813447955996"},"directories":{},"publish_time":1499906617971,"_hasShrinkwrap":false,"_cnpm_publish_time":1499906617971},"0.1.1":{"name":"@mapbox/appropriate-images-react","version":"0.1.1","description":"Examples showing how to use the resized, optimized images that you generated with appropriate-images in React","main":"dist/index.js","files":["dist"],"scripts":{"start":"webpack-dev-server","precommit":"lint-staged","format":"prettier --single-quote --write '{,src/**/}*.js'","lint":"eslint .","test-jest":"jest","pretest":"npm run lint","test":"jest","build":"babel src --out-dir dist","prepublishOnly":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/mapbox/appropriate-images-react.git"},"keywords":["appropriate-images","responsive","images","react"],"author":{"name":"Mapbox"},"license":"MIT","bugs":{"url":"https://github.com/mapbox/appropriate-images-react/issues"},"homepage":"https://github.com/mapbox/appropriate-images-react#readme","dependencies":{"@mapbox/appropriate-images-get-url":"^0.1.1","@mapbox/react-simple-surveyor":"^0.1.1"},"devDependencies":{"babel-cli":"^6.24.1","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","enzyme":"^2.9.1","enzyme-to-json":"^1.5.1","eslint":"^4.1.0","eslint-plugin-react":"^7.1.0","husky":"^0.14.1","jest":"^20.0.4","lint-staged":"^4.0.0","prettier":"1.4.4","prop-types":"^15.5.10","react":"^15.6.1","react-dom":"^15.6.1","react-test-renderer":"^15.6.1"},"lint-staged":{"**/*.js":["eslint","prettier --single-quote --write","git add"]},"babel":{"presets":["es2015","react"]},"jest":{"coverageReporters":["json","lcov","text","html"],"clearMocks":true},"gitHead":"bb54c55444bfa5dbcb9468e3ebbfa3d90233ee5c","_id":"@mapbox/appropriate-images-react@0.1.1","_npmVersion":"5.2.0","_nodeVersion":"6.11.0","_npmUser":{"name":"davidtheclark","email":"david.dave.clark@gmail.com"},"dist":{"shasum":"835e75f86a965db7b5a22e00cb7486b9d6547a12","size":4734,"noattachment":false,"key":"/@mapbox/appropriate-images-react/-/@mapbox/appropriate-images-react-0.1.1.tgz","tarball":"http://registry.cnpm.dingdandao.com/@mapbox/appropriate-images-react/download/@mapbox/appropriate-images-react-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/appropriate-images-react-0.1.1.tgz_1499818904512_0.2871140332426876"},"directories":{},"publish_time":1499818904862,"_hasShrinkwrap":false,"_cnpm_publish_time":1499818904862},"0.1.0":{"name":"@mapbox/appropriate-images-react","version":"0.1.0","description":"Examples showing how to use the resized, optimized images that you generated with appropriate-images in React","main":"index.js","scripts":{"start":"webpack-dev-server","precommit":"lint-staged","format":"prettier --single-quote --write '{,src/**/}*.js'","lint":"eslint .","test-jest":"jest","pretest":"npm run lint","test":"jest"},"repository":{"type":"git","url":"git+https://github.com/mapbox/appropriate-images-react.git"},"keywords":["appropriate-images","responsive","images","react"],"author":{"name":"Mapbox"},"license":"MIT","bugs":{"url":"https://github.com/mapbox/appropriate-images-react/issues"},"homepage":"https://github.com/mapbox/appropriate-images-react#readme","dependencies":{"@mapbox/appropriate-images-get-url":"^0.1.1","@mapbox/react-simple-surveyor":"^0.1.1"},"devDependencies":{"babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","enzyme":"^2.9.1","enzyme-to-json":"^1.5.1","eslint":"^4.1.0","eslint-plugin-react":"^7.1.0","husky":"^0.14.1","jest":"^20.0.4","lint-staged":"^4.0.0","prettier":"1.4.4","prop-types":"^15.5.10","react":"^15.6.1","react-dom":"^15.6.1","react-test-renderer":"^15.6.1"},"lint-staged":{"**/*.js":["eslint","prettier --single-quote --write","git add"]},"babel":{"presets":["es2015","react"]},"jest":{"coverageReporters":["json","lcov","text","html"],"clearMocks":true},"gitHead":"08e7cb07c01f24a3d894bd0de757dbbd6ef43fd6","_id":"@mapbox/appropriate-images-react@0.1.0","_npmVersion":"5.0.4","_nodeVersion":"6.11.0","_npmUser":{"name":"davidtheclark","email":"david.dave.clark@gmail.com"},"dist":{"shasum":"ca38bb49aca9b520ec6412088976790b45dbcf6e","size":54473,"noattachment":false,"key":"/@mapbox/appropriate-images-react/-/@mapbox/appropriate-images-react-0.1.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/@mapbox/appropriate-images-react/download/@mapbox/appropriate-images-react-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/appropriate-images-react-0.1.0.tgz_1499299249181_0.9698770577087998"},"directories":{},"publish_time":1499299249311,"_hasShrinkwrap":false,"_cnpm_publish_time":1499299249311}},"readme":"# @mapbox/appropriate-images-react\n\n[![Build Status](https://travis-ci.com/mapbox/appropriate-images-react.svg?branch=main)](https://travis-ci.com/mapbox/appropriate-images-react)\n\n**Use in combination with [appropriate-images].**\n\nAfter you've generated resized, optimized images with [appropriate-images], you'll want to use them in the browser.\nIf you like React, you'll want to use them with React.\nYou'll need to determine *which variant* of the image to load — that is, which size, and whether to load the `.webp` version or not.\nThis module does that.\n\nHere are the steps it takes.\n\n- Measures the element's available width with [react-simple-surveyor](https://github.com/mapbox/react-simple-surveyor);\n- Combines that width with your [appropriate-images configuration] to get a URL, using [appropriate-images-get-url];\n- Then renders the appropriate variant of the image.\n\n(If you aren't using React but want to use your [appropriate-images] in the browser, check out [appropriate-images-get-url](https://github.com/mapbox/appropriate-images-get-url)).\n\n## API\n\n### scopeAppropriateImage\n\n`scopeAppropriateImage(imageConfig, [options])`\n\nA named import for ES2015 modules, or a property on the CommonJS module.\n\n```js\nimport { scopeAppropriateImage } from '@mapbox/appropriate-images-react';\n// OR\nconst scopeAppropriateImage = require('@mapbox/appropriate-images-react').scopeAppropriateImage;\n```\n\nReturns an [AppropriateImage component](#appropriateimage) scoped according to your [appropriate-images configuration] and options.\n\n#### imageConfig\n\nType `Object`.\n**Required**.\n\nYour [appropriate-images configuration].\n**Use the same configuration at run time, in the browser, as you do at build time, when generating the resized, optimized images.**\n\n#### options\n\n##### transformUrl\n\nType: `(originalUrl: string) => string`.\nDefault: `x => x`.\n\nIf you want to transform the URL in some way, use this function.\nOne use-case is to take advantage of Webpack's augmented `require()` to get the URL *that Webpack creates* — if, for example, you're adding a hash to the end of files loaded with [Webpack's file-loader](https://github.com/webpack-contrib/file-loader).\n\nFor example:\n\n```js\nimport { scopeAppropriateImage } from '@mapbox/appropriate-images-react';\nconst AppropriateImage = scopeAppropriateImage(myImageConfig, {\n transformUrl: url => require(`/my/image/directory/${url}`)\n});\n```\n\n##### hiResRatio\n\nType: `number`.\nDefault: `1.3`.\n\nSee [the same option for appropriate-images-get-url](https://github.com/mapbox/appropriate-images-get-url#hiresratio).\n\n### AppropriateImage\n\nThis is the component that is returned by [`scopeAppropriateImage`].\nIt can render your image in two ways:\n\n- As an ``.\n Usually you'll do this.\n- As the background image of an absolutely positioned `
`.\n This can be handy in situations when you want to take advantage of powerful CSS background properties like `background-size` and `background-position`.\n\n#### props\n\nAll props you pass other than those documented below are applied directly to the rendered element (e.g. `alt`, `id`, `data-*`, `aria-*`).\n\n##### imageId\n\nType `string`.\n**Required**.\n\nThe id of the image to render.\nMust correspond with a key in the [appropriate-images configuration].\n\n##### background\n\nType `boolean`.\nDefault: `false`.\n\nBy default, an `` element is rendered.\nIf this option is `true`, you instead get a `
`, absolutely positioned to fill its container, whose `background-image` will be the appropriate image.\n\n##### backgroundPosition\n\nType `string`.\nDefault: `'center center'`.\n\n**Only meaningful if `background={true}`.**\nAny `background-position` value will do.\n\n##### backgroundSize\n\nType `string`.\nDefault: `'cover'`.\n\n**Only meaningful if `background={true}`.**\nAny `background-size` value will do.\n\n## Example\n\n```js\nconst React = require('react');\nconst { scopeAppropriateImage } = require('@mapbox/appropriate-images-react');\nconst imageConfig = require('./path/to/my/image-config.js');\n\nconst AppropriateImage = scopeAppropriateImage(imageConfig);\n\nclass MyPage extends React.PureComponent {\n render() {\n return (\n
\n

An appropriate image will be loaded below:

\n \n
\n );\n }\n}\n```\n\n[appropriate-images]: https://github.com/mapbox/appropriate-images\n[appropriate-images configuration]: https://github.com/mapbox/appropriate-images#image-configuration\n[appropriate-images-get-url]: https://github.com/mapbox/appropriate-images-get-url\n[`scopeAppropriateImage`]: #scopeappropriateimage\n","_attachments":{},"homepage":"https://github.com/mapbox/appropriate-images-react#readme","bugs":{"url":"https://github.com/mapbox/appropriate-images-react/issues"},"license":"MIT"}