{"_id":"react-focal","_rev":"32-cb19c01df4c76deb8f0636f056753840","name":"react-focal","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.0":{"name":"react-focal","version":"1.0.0","keywords":["image","focal","focal","point","crop"],"author":{"name":"chielkunkels"},"license":"MIT","_id":"react-focal@1.0.0","maintainers":[{"name":"chielkunkels","email":"chiel@kunkels.me"}],"homepage":"https://github.com/chielkunkels/react-focal#readme","bugs":{"url":"https://github.com/chielkunkels/react-focal/issues"},"dist":{"shasum":"5701a1cb62a4e36fdfd114648d3c24074acde2f0","tarball":"https://registry.npmjs.org/react-focal/-/react-focal-1.0.0.tgz","integrity":"sha512-Ygx72PFZ81QnSw5Pa57IKSUxIUqmgt3AteHAf6O2Y99q7YA/aJY/aeNjO6f2E6xy36YK1izDsD0SfrnvJmsqzg==","signatures":[{"sig":"MEYCIQDtKvklkRMUoikseasMcwQKpkpK6ABRm184xLtZRct1MQIhAPj70ZF83w0KHmhIZec0jgRgBf1NnJizSQxKL3ChEF54","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"lib/index.js","_from":".","_shasum":"5701a1cb62a4e36fdfd114648d3c24074acde2f0","gitHead":"cf939ce54a82e3cc4ff93eb2e8589ce53f7f38a9","scripts":{"dev":"npm-run-all clean --parallel dev:*","build":"npm-run-all clean --parallel build:*","clean":"rimraf lib","dev:styles":"npm run build:styles && node-sass -w src/focal.scss lib/focal.css","dev:scripts":"babel -w -d lib src","build:styles":"node-sass src/focal.scss lib/focal.css","build:scripts":"babel -d lib src"},"_npmUser":{"name":"chielkunkels","email":"chiel@kunkels.me"},"deprecated":"Package no longer supported. Use at your own risk.","repository":{"url":"git+ssh://git@github.com/chielkunkels/react-focal.git","type":"git"},"_npmVersion":"3.10.3","description":"Component to help select the focal point in an image","directories":{},"_nodeVersion":"4.4.7","devDependencies":{"react":"^15.2.0","eslint":"^2.13.1","rimraf":"^2.5.3","babel-cli":"^6.10.1","node-sass":"^3.8.0","npm-run-all":"^2.3.0","babel-eslint":"^6.1.0","babel-preset-react":"^6.11.1","babel-preset-es2015":"^6.9.0","eslint-plugin-react":"^5.2.2","babel-preset-stage-1":"^6.5.0","eslint-config-airbnb":"^9.0.1","eslint-plugin-import":"^1.10.0","eslint-plugin-jsx-a11y":"^1.5.3"},"peerDependencies":{"react":"^15.2.0"},"_npmOperationalInternal":{"tmp":"tmp/react-focal-1.0.0.tgz_1467647591342_0.39156879112124443","host":"packages-16-east.internal.npmjs.com"}},"1.0.1":{"name":"react-focal","version":"1.0.1","keywords":["image","focal","focal","point","crop"],"author":{"name":"chielkunkels"},"license":"MIT","_id":"react-focal@1.0.1","maintainers":[{"name":"chielkunkels","email":"chiel@kunkels.me"}],"homepage":"https://github.com/chielkunkels/react-focal#readme","bugs":{"url":"https://github.com/chielkunkels/react-focal/issues"},"dist":{"shasum":"d61e5d928a964ba03d75fafb9e9e131106117b7d","tarball":"https://registry.npmjs.org/react-focal/-/react-focal-1.0.1.tgz","integrity":"sha512-cvOGKPju6sQRJ1pErJKQk/esJ/bya48kk3np91GuNrUki4YFNLtqZQugPKVNsOd8gWuZ7bD4KOXMmq6mXS9qGA==","signatures":[{"sig":"MEUCICFSHnupSN8WEOH6dcfg2U6etaZ/SAvVQE7itcXUOoOKAiEAh0xGoF9fuW38sHac2I0Ss6DfMs3VwTqhzxi/O/5/868=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"lib/index.js","_from":".","_shasum":"d61e5d928a964ba03d75fafb9e9e131106117b7d","gitHead":"2399cd2549cff0f72dbae476aac3e33f92971c41","scripts":{"dev":"npm-run-all clean --parallel dev:*","build":"npm-run-all clean --parallel build:*","clean":"rimraf lib","dev:styles":"npm run build:styles && node-sass -w src/focal.scss lib/focal.css","prepublish":"npm run build","dev:scripts":"babel -w -d lib src","build:styles":"node-sass src/focal.scss lib/focal.css","build:scripts":"babel -d lib src"},"_npmUser":{"name":"chielkunkels","email":"chiel@kunkels.me"},"deprecated":"Package no longer supported. Use at your own risk.","repository":{"url":"git+ssh://git@github.com/chielkunkels/react-focal.git","type":"git"},"_npmVersion":"3.10.3","description":"Component to help select the focal point in an image","directories":{},"_nodeVersion":"4.4.7","devDependencies":{"react":"^15.2.0","eslint":"^2.13.1","rimraf":"^2.5.3","babel-cli":"^6.10.1","node-sass":"^3.8.0","npm-run-all":"^2.3.0","babel-eslint":"^6.1.0","babel-preset-react":"^6.11.1","babel-preset-es2015":"^6.9.0","eslint-plugin-react":"^5.2.2","babel-preset-stage-1":"^6.5.0","eslint-config-airbnb":"^9.0.1","eslint-plugin-import":"^1.10.0","eslint-plugin-jsx-a11y":"^1.5.3"},"peerDependencies":{"react":"^15.2.0"},"_npmOperationalInternal":{"tmp":"tmp/react-focal-1.0.1.tgz_1467727762635_0.13962667901068926","host":"packages-12-west.internal.npmjs.com"}},"1.0.2":{"name":"react-focal","version":"1.0.2","keywords":["image","focal","focal","point","crop"],"author":{"name":"chielkunkels"},"license":"MIT","_id":"react-focal@1.0.2","maintainers":[{"name":"chielkunkels","email":"chiel@kunkels.me"}],"homepage":"https://github.com/chielkunkels/react-focal#readme","bugs":{"url":"https://github.com/chielkunkels/react-focal/issues"},"dist":{"shasum":"272085b910d54ef875f8bbdcdd4eeefe29456916","tarball":"https://registry.npmjs.org/react-focal/-/react-focal-1.0.2.tgz","integrity":"sha512-leDpRE3aLUBN/Ae7Wqvwl0p/00qDM8D9159qcNNrZuZdgPAM2Wg8wI5piqa1YkWy+X6rWReSgm04R1i539hY3w==","signatures":[{"sig":"MEQCIDJ3mV/y9f60ihWczr/72PuI1HCeKrEY3Myoht/5Pd/fAiBh0AIgxGL4Z0idX+yrGUgklBzDeoQDVCQ3hovNlINOGQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"lib/index.js","_from":".","_shasum":"272085b910d54ef875f8bbdcdd4eeefe29456916","gitHead":"aa98e0007f4c2ae9961f525a568ba16c807f308a","scripts":{"dev":"npm-run-all clean --parallel dev:*","build":"npm-run-all clean --parallel build:*","clean":"rimraf lib","dev:styles":"npm run build:styles && node-sass -w src/focal.scss lib/focal.css","prepublish":"npm run build","dev:scripts":"babel -w -d lib src","build:styles":"node-sass src/focal.scss lib/focal.css","build:scripts":"babel -d lib src"},"_npmUser":{"name":"chielkunkels","email":"chiel@kunkels.me"},"deprecated":"Package no longer supported. Use at your own risk.","repository":{"url":"git+ssh://git@github.com/chielkunkels/react-focal.git","type":"git"},"_npmVersion":"3.10.3","description":"Component to help select the focal point in an image","directories":{},"_nodeVersion":"4.4.7","devDependencies":{"react":"^15.2.0","eslint":"^2.13.1","rimraf":"^2.5.3","babel-cli":"^6.10.1","node-sass":"^3.8.0","npm-run-all":"^2.3.0","babel-eslint":"^6.1.0","babel-preset-react":"^6.11.1","babel-preset-es2015":"^6.9.0","eslint-plugin-react":"^5.2.2","babel-preset-stage-1":"^6.5.0","eslint-config-airbnb":"^9.0.1","eslint-plugin-import":"^1.10.0","eslint-plugin-jsx-a11y":"^1.5.3"},"peerDependencies":{"react":"^15.2.0"},"_npmOperationalInternal":{"tmp":"tmp/react-focal-1.0.2.tgz_1467813840053_0.38615674152970314","host":"packages-16-east.internal.npmjs.com"}},"1.0.3":{"name":"react-focal","version":"1.0.3","keywords":["image","focal","point","crop"],"author":{"name":"chielkunkels"},"license":"MIT","_id":"react-focal@1.0.3","maintainers":[{"name":"chielkunkels","email":"chiel@kunkels.me"},{"name":"poki","email":"developers@poki.com"}],"homepage":"https://github.com/poki/react-focal#readme","bugs":{"url":"https://github.com/poki/react-focal/issues"},"dist":{"shasum":"fc28b12e80de69ffddfd559ec7ddc4697b1f329c","tarball":"https://registry.npmjs.org/react-focal/-/react-focal-1.0.3.tgz","fileCount":16,"integrity":"sha512-T6CKxO/6/9iciknzpPUIaQkcpHtrp/RrQGGQ+WI4JyY1RnjqVmFuswS8cD8yzTGwWSqlhpwXLZlsFAUVZ8iz+w==","signatures":[{"sig":"MEUCICiK62Pvb2dfRQ02QqGijeVXyR1/Fv2UHZ5B6/mS4oM7AiEAiP4asS2HEvTsTD1fjWE02tyz4ltzQiIWkPCobCcbIuE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":137544},"main":"lib/index.js","gitHead":"a9768b02fb7decda322160480d2c95fc012f96d6","scripts":{"dev":"npm-run-all clean --parallel dev:*","build":"npm-run-all clean --parallel build:*","clean":"rimraf lib","dev:styles":"npm run build:styles && node-sass -w src/focal.scss lib/focal.css","prepublish":"npm run build","dev:scripts":"babel -w -d lib src","build:styles":"node-sass src/focal.scss lib/focal.css","build:scripts":"babel -d lib src"},"_npmUser":{"name":"poki","email":"developers@poki.com"},"deprecated":"Package no longer supported. Use at your own risk.","repository":{"url":"git+ssh://git@github.com/poki/react-focal.git","type":"git"},"_npmVersion":"5.6.0","description":"Component to help select the focal point in an image","directories":{},"_nodeVersion":"9.5.0","dependencies":{"prop-types":"^15.6.0"},"_hasShrinkwrap":false,"devDependencies":{"react":"^16.2.0","eslint":"^2.13.1","rimraf":"^2.5.3","babel-cli":"^6.10.1","node-sass":"^3.8.0","npm-run-all":"^2.3.0","babel-eslint":"^6.1.0","babel-preset-react":"^6.11.1","babel-preset-es2015":"^6.9.0","eslint-plugin-react":"^5.2.2","babel-preset-stage-1":"^6.5.0","eslint-config-airbnb":"^9.0.1","eslint-plugin-import":"^1.10.0","eslint-plugin-jsx-a11y":"^1.5.3"},"_npmOperationalInternal":{"tmp":"tmp/react-focal_1.0.3_1518779046064_0.9007685607828773","host":"s3://npm-registry-packages"}}},"time":{"created":"2016-07-04T15:53:13.622Z","modified":"2026-09-23T15:46:06.323Z","1.0.0":"2016-07-04T15:53:13.622Z","1.0.1":"2016-07-05T14:09:25.076Z","1.0.2":"2016-07-06T14:04:01.167Z","1.0.3":"2018-02-16T11:04:07.270Z"},"bugs":{"url":"https://github.com/poki/react-focal/issues"},"author":{"name":"chielkunkels"},"license":"MIT","homepage":"https://github.com/poki/react-focal#readme","keywords":["image","focal","point","crop"],"repository":{"url":"git+ssh://git@github.com/poki/react-focal.git","type":"git"},"description":"Component to help select the focal point in an image","maintainers":[{"email":"tech@poki.com","name":"pokiold"},{"email":"erik@dubbelboer.com","name":"erikdubbelboer"},{"email":"caspervanwezel@gmail.com","name":"caspervw"},{"email":"eriksombroek@gmail.com","name":"eriksombroek"},{"email":"pieter@poki.com","name":"pieterhop"},{"email":"sergei@poki.com","name":"sergeipoki"},{"email":"pedrovqrocha@gmail.com","name":"pedr0rocha"},{"email":"garffans@outlook.com","name":"g4rfan"},{"email":"larissa@poki.com","name":"larissatobias"},{"email":"rodrigo@poki.com","name":"rodaoud"},{"email":"viktor@poki.com","name":"vraithy"},{"email":"darrell.stephenson@gmail.com","name":"futuredarrell"},{"email":"pareen@poki.com","name":"pareen1"},{"email":"chiel@kunkels.me","name":"chielkunkels"}],"readme":"# react-focal\n\n`react-focal` helps users define the focal point of their images. This allows\nthe developer to create suitable crops for all kinds of resolutions which will\nalways be centered around the subject of any image.\n\n\n## Usage\n\n`react-focal` can be found on [npm][npm], so to install it, run:\n\n```bash\n$ npm install --save react-focal\n```\n\nOnce it's installed you can use it as such:\n\n```jsx\nimport React from 'react';\nimport Focal from 'react-focal';\n\nexport default function MyComponent() {\n return (\n \n );\n}\n```\n\nThis will render the most basic instance of Focal which doesn't really do much.\nIt becomes more interesting when you add an `onChange` handler to the component.\n\n```jsx\nimport Focal from 'react-focal';\n\nexport default class MyComponent extends React.Component {\n constructor() {\n super();\n\n this.state = {\n x: 50,\n y: 50,\n };\n\n this.onChange = this.onChange.bind(this);\n }\n\n onChange(x, y) {\n this.setState({ x, y });\n }\n\n render() {\n return (\n