{"_id":"@bentley/imodel-react-hooks","_rev":"8-2ca53bfa892675c7c7aa5ea1dccdaf27","name":"@bentley/imodel-react-hooks","dist-tags":{"latest":"0.1.4"},"versions":{"0.1.1":{"name":"@bentley/imodel-react-hooks","version":"0.1.1","description":"Reusable React Hooks to help with iModel.js","author":{"name":"Bentley Systems, Inc.","url":"http://www.bentley.com"},"keywords":["Bentley","hooks","react","iModel.js"],"repository":{"type":"git","url":"https://github.com/imodeljs/viewer-components-react/tree/master/packages/imodel-react-hooks"},"license":"MIT","private":false,"main":"lib/index.js","types":"lib/index.d.ts","scripts":{"start":"tsc -p tsconfig.json -w","build":"tsc -p tsconfig.json 1>&2","clean":"rimraf lib build","test":"jest","lint":"tslint -p . 1>&2","cover":""},"devDependencies":{"@bentley/bentleyjs-core":"^2.0.0","@bentley/geometry-core":"^2.0.0","@bentley/imodeljs-common":"^2.0.0","@bentley/imodeljs-frontend":"^2.0.0","@testing-library/react":"^9.1.4","@types/jest":"^24.9.0","@types/testing-library__react":"*","@types/react":"16.9.16","@types/react-dom":"16.8.2","babel-jest":"^24.9.0","jest":"^24.9.0","react":"16.13.1","react-dom":"16.13.1","react-test-renderer":"16.13.1","rimraf":"^3.0.2","ts-jest":"^26.1.1","typescript":"^3.9.2"},"peerDependencies":{"@bentley/bentleyjs-core":"^2.0.0","@bentley/geometry-core":"^2.0.0","@bentley/imodeljs-common":"^2.0.0","@bentley/imodeljs-frontend":"^2.0.0","react":"^16.13.0","react-dom":"^16.13.0"},"jest":{"roots":["<rootDir>/src"],"transform":{"^.+\\.(ts|tsx)$":"ts-jest","^.+\\.(js|jsx)$":"babel-jest"},"verbose":true,"coveragePathIgnorePatterns":["/node_modules/","test",".d.ts"],"collectCoverageFrom":["<rootDir>/src/**"]},"_id":"@bentley/imodel-react-hooks@0.1.1","_nodeVersion":"12.19.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-SQ/SxsFi2iIRYyzVzgtc8PVhICdB47AOQS7MzNiWViMHQICTyIWe9f2k2ZYCKJsi2qHrxUzUWwW5C26f8NbBkQ==","shasum":"753806d1376da183e8eada0f61e40075cf9492c6","tarball":"https://registry.npmjs.org/@bentley/imodel-react-hooks/-/imodel-react-hooks-0.1.1.tgz","fileCount":52,"unpackedSize":122892,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhvnFCRA9TVsSAnZWagAAdGIP/Az/UmDNgqud9h14EBUU\nknv2JwqDL4mbko3WQYTuicrc92wnnV3TPwoSS9aw2wCVPXi0C02YrbUI5Mm3\ngfouOh9hXb4+9KErwDDfs3bcMNQbnNcDVdffJ6Qf7M7QguHuAtYZuItg5NJD\nhWYao4TUf/D4yovUtqu9d2GbyC+BQSSlGy1Gq/x7ydPNbJDXe2kKzoaRPuwd\nQGsMC4ArHlj18KkvSbmtdlINiyDus+zhKaAPlDC5T35935WzC8P1jIGn9wZu\noNpeI3+mdaF/N9SngDSxJgO8oaxVW+J3bKUOtT8J/L1WA+LVWcRrF8mmbCp4\nCImo+moPMY5+TIuUh77jHJrk5G+Ng7B+U58veEmlkhXVrTovxDa2ry87A/y0\nSxwL7RujBo0zYWgjkfznFnkA2XAkM4csZ5UbyoIEVdqqkpxKaBK1pOrZAYaE\ny8+NCMyY6LPjaT9kG93yrLyGR2aSvAJ1cBOdtkAMcBpN8mJfdgXuUhmwtiym\nbmmRbIQiiFOYiMufY+Poam6mRIAYzTcQjQvHoIlEYdlAtHhypEc4aGvZsiHO\nqwvHa/vBmEK/VEzDx1grNo9F8iVlQDXL0DTjPkyRlBY/kNWFpGBNhvNHOwIX\nADImmuwP3XyC7XgcDldbjr6QqzjWop+LWe6GElrriEqxt7h7bPNsETJaLfZS\ncedo\r\n=k04v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDzWxwCB0mGPNfiCYApcip7qhEvUhs2qxY9USS2VjsbigIgWRqsKB+npIwqYSNK/wxFBOLPg8cVj9MurskrcvG/yFQ="}]},"maintainers":[{"name":"imodeljs","email":"imodel.js@gmail.com"},{"name":"colinkerr","email":"Colin.Kerr@bentley.com"},{"name":"cshafer","email":"caleb.shafer@bentley.com"},{"name":"philip-mcgraw","email":"philip.mcgraw@bentley.com"}],"_npmUser":{"name":"imodeljs","email":"imodel.js@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/imodel-react-hooks_0.1.1_1602681285209_0.5484213022397395"},"_hasShrinkwrap":false,"deprecated":"This package has been deprecated in favor of @itwin/imodel-react-hooks"},"0.1.2":{"name":"@bentley/imodel-react-hooks","version":"0.1.2","description":"Reusable React Hooks to help with iModel.js","keywords":["Bentley","hooks","react","iModel.js"],"repository":{"type":"git","url":"https://github.com/imodeljs/viewer-components-react/tree/master/packages/imodel-react-hooks"},"license":"MIT","author":{"name":"Bentley Systems, Inc.","url":"http://www.bentley.com"},"main":"lib/index.js","types":"lib/index.d.ts","scripts":{"build":"tsc -p tsconfig.json 1>&2","clean":"rimraf lib build","cover":"","lint":"tslint -p . 1>&2","start":"tsc -p tsconfig.json -w","test":"jest"},"jest":{"collectCoverageFrom":["<rootDir>/src/**"],"coveragePathIgnorePatterns":["/node_modules/","test",".d.ts"],"roots":["<rootDir>/src"],"transform":{"^.+\\.(ts|tsx)$":"ts-jest","^.+\\.(js|jsx)$":"babel-jest"},"verbose":true},"devDependencies":{"@bentley/bentleyjs-core":"^2.0.0","@bentley/geometry-core":"^2.0.0","@bentley/imodeljs-common":"^2.0.0","@bentley/imodeljs-frontend":"^2.0.0","@testing-library/react":"^9.1.4","@types/jest":"^24.9.0","@types/react":"16.9.16","@types/react-dom":"16.8.2","@types/testing-library__react":"*","babel-jest":"^24.9.0","jest":"^24.9.0","react":"16.13.1","react-dom":"16.13.1","react-test-renderer":"16.13.1","rimraf":"^3.0.2","ts-jest":"^26.1.1","typescript":"^3.9.2"},"peerDependencies":{"@bentley/bentleyjs-core":"^2.0.0","@bentley/geometry-core":"^2.0.0","@bentley/imodeljs-common":"^2.0.0","@bentley/imodeljs-frontend":"^2.0.0","react":"^16.13.0","react-dom":"^16.13.0"},"_id":"@bentley/imodel-react-hooks@0.1.2","_nodeVersion":"12.20.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-EXVDElAG12f+CN1AV1x4z4Kss7uXsxyn8rFfLDneqw16aPQJu1Afiad+euTnonG8+OqsUKiEMF0osCQGaJn5iw==","shasum":"e8b51a9b9558b207c135c5f9ed5a3c1116a3e735","tarball":"https://registry.npmjs.org/@bentley/imodel-react-hooks/-/imodel-react-hooks-0.1.2.tgz","fileCount":49,"unpackedSize":121162,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxlfhCRA9TVsSAnZWagAABtcP/RYDmK5fBnygBOpnaCdW\nJ6FJso58zicM7O8L52sjUD8BYd57aoM4j04C7ngpvG6faiZiKLHOqTafhKXM\nJWmY84gstXMM5/sKSkaQ+N1LgwVIIs4yro4p7sq81vjDDfnlC3sz5i1lZ7aV\ndiEUT5I589G1hbEy9r6WHjaDiIvQTWP79G/Gyr1suqr8Xs2vzT8oyCJwikNy\nUMA2KttOiJxs0dIYbptvsPRMg8A/7g2WAfvoUUQY01lAQIIZTteYL/vWYzJa\nclkWFJnoWaiO+zvqsKMCy9aNqzLg8vlGbJCHDy5u2L3+Pl7IAvMJDBBP2+i1\n6tS9VIWL0qg5yFrmqC1lG8DjCaAHt7GuVHpWTRfV1hfm07NAI5CA8qQ9iCFI\nAQwjRWU8VQ4G+fSoDILszy2pepgMmSN2yTpNNciYeEobUtqCGFfqjMsAj8Ij\nFEfxNqxtE7WtxhruEP5lL1OXO0MwTaIt7iiWjnDHmIUsyL9PcZOUK9tWtm1I\nOlOo3EfuESHzoIgUr+09hRLsrIj4C+8F8ZSTZIRkPY7DXZqIUc3rIksk+aPo\naR3Uj9/4RCZCryhCTrdrswfD+ck0tWISKWlzgEeVR+kQ2VJ4bxAUQFWV8NXZ\nP9SbNDyl+F2g3HuSoJwTPRiJJXyosHFkzW4SeRcL6EVZZ2vALMnPVOvxk1Ai\n205I\r\n=381k\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDv1LTyI9wR2tA7WGB5kVFJyV/adx2foNxifQO3BZP4tAiApaavEKNMtxgH7dbSk9mpiekpkzmuPVQ6RFIaSqxYkRQ=="}]},"_npmUser":{"name":"imodeljs","email":"imodel.js@gmail.com"},"directories":{},"maintainers":[{"name":"imodeljs","email":"imodel.js@gmail.com"},{"name":"colinkerr","email":"Colin.Kerr@bentley.com"},{"name":"cshafer","email":"caleb.shafer@bentley.com"},{"name":"philip-mcgraw","email":"philip.mcgraw@bentley.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/imodel-react-hooks_0.1.2_1606834145232_0.08298302193380303"},"_hasShrinkwrap":false,"deprecated":"This package has been deprecated in favor of @itwin/imodel-react-hooks"},"0.1.3":{"name":"@bentley/imodel-react-hooks","version":"0.1.3","description":"Reusable React Hooks to help with iModel.js","keywords":["Bentley","hooks","react","iModel.js"],"repository":{"type":"git","url":"https://github.com/imodeljs/viewer-components-react/tree/master/packages/imodel-react-hooks"},"license":"MIT","author":{"name":"Bentley Systems, Inc.","url":"http://www.bentley.com"},"main":"lib/index.js","types":"lib/index.d.ts","scripts":{"build":"tsc -p tsconfig.json 1>&2","clean":"rimraf lib build .rush/temp/package-deps*.json","cover":"","lint":"tslint -p . 1>&2","start":"tsc -p tsconfig.json -w","test":"jest"},"jest":{"collectCoverageFrom":["<rootDir>/src/**"],"coveragePathIgnorePatterns":["/node_modules/","test",".d.ts"],"roots":["<rootDir>/src"],"transform":{"^.+\\.(ts|tsx)$":"ts-jest","^.+\\.(js|jsx)$":"babel-jest"},"verbose":true},"devDependencies":{"@bentley/bentleyjs-core":"^2.0.0","@bentley/geometry-core":"^2.0.0","@bentley/imodeljs-common":"^2.0.0","@bentley/imodeljs-frontend":"^2.0.0","@testing-library/react":"^9.1.4","@types/jest":"^24.9.0","@types/react":"~16.9.35","@types/react-dom":"^16.8.0","@types/testing-library__react":"^9.1.3","babel-jest":"^24.9.0","jest":"^26.1.0","react":"^16.13.0","react-dom":"^16.13.0","react-test-renderer":"^16.13.0","rimraf":"^3.0.2","ts-jest":"^26.1.1","typescript":"^3.9.2"},"peerDependencies":{"@bentley/bentleyjs-core":"^2.0.0","@bentley/geometry-core":"^2.0.0","@bentley/imodeljs-common":"^2.0.0","@bentley/imodeljs-frontend":"^2.0.0","react":"^16.13.0","react-dom":"^16.13.0"},"_id":"@bentley/imodel-react-hooks@0.1.3","_nodeVersion":"12.20.1","_npmVersion":"6.14.10","dist":{"integrity":"sha512-NwydRkWZUzPMxE3daQyBnFvKp6/+NIDme5QP4h4vtW3QNB4u6JbAVG9NJPtLRCGdYFPmN0ulTvM7PHr6EIg1Tw==","shasum":"a9ab2c1d55442fd1404b1f4082404fb05df1f349","tarball":"https://registry.npmjs.org/@bentley/imodel-react-hooks/-/imodel-react-hooks-0.1.3.tgz","fileCount":49,"unpackedSize":121978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEz6ECRA9TVsSAnZWagAAPUAP/1bvdYZaz4L4iTIpJ9ek\nB6yzetgEpMsYT5NHViW380PFEVt/JsbEEnW+SbduX6CH5adUvW4K316kOk/d\nlWx3UcTRIlnaeschml90KJAadXtFTxUe6iX8z2Ud1zBbI5rFqJxBhdexYdQ2\ngak4DExIvgo2Ow5D2HsN3+yMTEi28ZgHovOSR4q4vmrW4bA9au3lnnPsZbz9\nf0WPeyJI8vrJBAU79KE3vbVlA1aaDCoyQ1mks+GC2NtKtvVZlB27h8h3azzw\nezfV+34v4bdYKJrKg/kLEF4a/2IFyEGwIcICOkd59CMJUgc9MiFJ9Q/qKzZi\n0vinAXLYScXLZDm/pNlWlZIaoIUm1puW5pYfaF0NLiOTk7MU300j+SAdxVry\nkJKWo8CWtuY5BGp83W9RCiVt6hda8g7+l6sR5AzlQQv99PFoOKykyzchBslH\naKFxo4F5K8U+3HxvgacPTUNwlRMkIR4KR4YnQ7suS8sZPZx9qZeO4nCnNkTk\n1iXVq0xUrJrVl6QOIXFk+1XYlZ1GH1n30UY+yyjhtwwLWJ4sQ983GnHQs5Zw\n7iOBfSqiWI5Cdldl9jStN85GR0Zn3yJFstxD6TvNzlUQNOWbesbaBau4VJgX\ne9ZewJcZPykXccjdgebCR5zXbObpwnanSgqBqrDFbLi+TuxDsjn6JXKPtvA5\noMVC\r\n=tuWD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCtH3k8mcA8VjZqZmDXA1Pr2R5hEEF6aiHXs70lk5mkYAIgacD4Z/ZNJFF4PnInbBr3QP4lb5/8b2GAVdJNM++Gq6M="}]},"_npmUser":{"name":"imodeljs","email":"imodel.js@gmail.com"},"directories":{},"maintainers":[{"name":"cshafer","email":"caleb.shafer@bentley.com"},{"name":"philip-mcgraw","email":"philip.mcgraw@bentley.com"},{"name":"colinkerr","email":"Colin.Kerr@bentley.com"},{"name":"imodeljs","email":"imodel.js@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/imodel-react-hooks_0.1.3_1611873923931_0.07830684406207356"},"_hasShrinkwrap":false,"deprecated":"This package has been deprecated in favor of @itwin/imodel-react-hooks"},"0.1.4":{"name":"@bentley/imodel-react-hooks","version":"0.1.4","description":"Reusable React Hooks to help with iModel.js","keywords":["Bentley","hooks","react","iModel.js"],"repository":{"type":"git","url":"https://github.com/imodeljs/viewer-components-react/tree/master/packages/imodel-react-hooks"},"license":"MIT","author":{"name":"Bentley Systems, Inc.","url":"http://www.bentley.com"},"main":"lib/index.js","types":"lib/index.d.ts","jest":{"collectCoverageFrom":["<rootDir>/src/**"],"coveragePathIgnorePatterns":["/node_modules/","test",".d.ts"],"roots":["<rootDir>/src"],"transform":{"^.+\\.(ts|tsx)$":"ts-jest","^.+\\.(js|jsx)$":"babel-jest"},"verbose":true},"devDependencies":{"@bentley/bentleyjs-core":"^2.0.0","@bentley/geometry-core":"^2.0.0","@bentley/imodeljs-common":"^2.0.0","@bentley/imodeljs-frontend":"^2.0.0","@testing-library/react":"^9.1.4","@types/jest":"^24.9.0","@types/react":"~16.9.35","@types/react-dom":"^16.8.0","@types/testing-library__react":"^9.1.3","babel-jest":"^24.9.0","jest":"^26.1.0","react":"^16.13.0","react-dom":"^16.13.0","react-test-renderer":"^16.13.0","rimraf":"^3.0.2","ts-jest":"^26.1.1","typescript":"^3.9.2"},"peerDependencies":{"@bentley/bentleyjs-core":"^2.0.0","@bentley/geometry-core":"^2.0.0","@bentley/imodeljs-common":"^2.0.0","@bentley/imodeljs-frontend":"^2.0.0","react":"^16.13.0","react-dom":"^16.13.0"},"scripts":{"build":"tsc -p tsconfig.json 1>&2","clean":"rimraf lib build .rush/temp/package-deps*.json","rebuild":"npm run clean && npm run build","cover":"","lint":"","start":"tsc -p tsconfig.json -w","test":"jest"},"_resolved":"","_integrity":"","_from":"file:bentley-imodel-react-hooks-0.1.4.tgz","_id":"@bentley/imodel-react-hooks@0.1.4","_nodeVersion":"12.22.10","_npmVersion":"6.14.16","dist":{"integrity":"sha512-OPjDlYkxWJxJl8mRPqFcpa5/fVaBQ/DHhoOPQ+4p1zhNUejNlazJ2rO+5hoA9EXJcKm/oMykcJ34zoW5sjL1tQ==","shasum":"30b44d07a029c59d8f90f5df08ef7af61089dbdf","tarball":"https://registry.npmjs.org/@bentley/imodel-react-hooks/-/imodel-react-hooks-0.1.4.tgz","fileCount":48,"unpackedSize":121737,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/Ha9CRA9TVsSAnZWagAAvRoP+QF510Pmhr7Zdwyw/ZZW\ntOaDe6ch1KGXaw75Q1AruFhGUCjJeUviL53SZnNQINALhpRW5Bm0kvhcjkr4\nJeMftb7LiWb0stQPb549Ychv6onVmPxGL8uFJBSJnEK7LBmokKOU/LR6Yupl\nPB4TDnOwxzCYvuTj3TCwbj7abrvEK2pfVYxiW5sGnRiAOR3YJk8krb9W2ESO\nBn4T72fw/VJXhaeJ17htDm3lmV76XauhvPb7PZFm769bLDfj8CKfj534uXBN\noG2T/LZYrxF5f0gAY94MYew6fsIwj8cyOsPiMXwEdscoxWQbXQxbRUBO+HVM\nAMX/OWVATwrZaxJSal8BS2UhxpXMAXrHXp+pVGh5FFpITzMKtE8cosJHtsK4\nFXgDl/LREmlImTr6RFGhS3Cf7h43cfy5A9lwDzCXxl6RQ41fBxQA6BVEtCZL\nyp1RZyTAOZJnQJWOvSuflz7NO+8ywfmIOWcYADiTEu9bJsQgreDp1XcHgt/8\nrpwERVh3sD1N6I4dIws+RHEJUhVcJJTb/o+pmifcfc1vZZcXh7CGUalvEU77\nWBDdTx0kq2IsmwFUqNN9ZJnQArm5PZNpYyWfS5GHtAAiumnwcn3CRz+Z/bpB\nna6PLluo3UAxitdpn+2O0aTKT3XlW2mAT+7KiXQq7/RozXeW6Ay0dffBj71e\nGZGA\r\n=+HqG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCazGSff0QzwK/Xsodr4hxckQ35DRtEyzHmyf8tgnvBjgIhAOWRQyNeF3k+6a7KKuT1MYyIjOeryrHIeXwpcsgK0S6d"}]},"_npmUser":{"name":"imodeljs","email":"imodel.js@gmail.com"},"directories":{},"maintainers":[{"name":"cshafer","email":"caleb.shafer@bentley.com"},{"name":"philip-mcgraw","email":"philip.mcgraw@bentley.com"},{"name":"colinkerr","email":"Colin.Kerr@bentley.com"},{"name":"imodeljs","email":"imodel.js@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/imodel-react-hooks_0.1.4_1643935421688_0.3667270482754219"},"_hasShrinkwrap":false,"deprecated":"This package has been deprecated in favor of @itwin/imodel-react-hooks"}},"time":{"created":"2020-10-14T13:14:44.999Z","0.1.1":"2020-10-14T13:14:45.352Z","modified":"2023-11-13T20:50:41.116Z","0.1.2":"2020-12-01T14:49:05.467Z","0.1.3":"2021-01-28T22:45:24.044Z","0.1.4":"2022-02-04T00:43:41.925Z"},"maintainers":[{"email":"arunbgeo@gmail.com","name":"aruniverse"},{"email":"Colin.Kerr@bentley.com","name":"colinkerr"},{"email":"caleb.shafer@bentley.com","name":"cshafer"},{"email":"imodel.js@gmail.com","name":"imodeljs"},{"email":"bill@wbg.dev","name":"wgoehrig"}],"description":"Reusable React Hooks to help with iModel.js","keywords":["Bentley","hooks","react","iModel.js"],"repository":{"type":"git","url":"https://github.com/imodeljs/viewer-components-react/tree/master/packages/imodel-react-hooks"},"author":{"name":"Bentley Systems, Inc.","url":"http://www.bentley.com"},"license":"MIT","readme":"# iModel.js React Hooks\n\n### Description\n\nReact hooks for low-overhead and idiomatic imodeljs usage in React where appropriate.\n\nCurrently, the [`useMarker`](#useMarker), and [`useFeatureOverrides`](#useFeatureOverrides) hooks.\n\n## When and when not to use hooks\n\nReact's hooks are fun, and often great, but they require you to deal with state in a scope that will\nbe thrown away, to which references would be mostly memory leaks and bugs. Because of this, you need\nto stabilize your functions (useCallback), keep track of dependencies manually, etc. And because of this,\nyou cannot define a class with access to React state easily (in a functional component). Although this\npackage did at one point have a hook for using a class directly in a functional component, managing references\nto outer state requires patterns that thrash prototype chain access caches in modern JS engines and are pretty much a bad\nidea. So it must be said:\n\n**_if you are using a class that needs access to state in React, prefer a class component_**.\n\nMichael Belousov wrote [an article](https://medium.com/imodeljs/provider-local-class-pattern-dc44bab33144) on the iModel.js community\nblog going further in depth than that.\n\nThe hooks in this package are either for simple use cases with boilerplate reduction ([`useMarker`](#useMarker)),\nor places where you aren't dealing directly with a dedicated class instance ([`useFeatureOverrides`](#useFeatureOverrides)).\nOtherwise, try this pattern for integrating any class into your React state:\n\n```tsx\nimport React, { useContext } from \"react\";\nimport { UserContext, UserContextType } from \"./MyApplicationsContexts\";\nimport { PrimitiveTool, BeButtonEvent } from \"@bentley/imodeljs-frontend\";\n\nconst ToolProvider = () => {\n  const userContext = useContext(UserContext);\n  return <InnerToolProvider userContext={userContext} />;\n};\n\nclass InnerToolProvider extends React.Component<{\n  userContext: UserContextType;\n}> {\n  MyTool = (() => {\n    const componentThis = this;\n    return class MyTool extends PrimitiveTool {\n      static toolId = \"myTool\";\n\n      onDataButtonDown(ev: BeButtonEvent) {\n        const user = componentThis.props.userContext.name;\n        console.log(`${user} pressed here: ${ev.point}`);\n        return Promise.resolve(EventHandled.Yes);\n      }\n    };\n  })();\n\n  componentWillMount() {\n    IModelApp.tools.register(this.MyTool);\n  }\n  componentWillUnmount() {\n    IModelApp.tools.unRegister(this.MyTool.toolId);\n  }\n  render() {\n    return null;\n  }\n}\n```\n\nThe above works with inheritance, be it in or out of react state, abstract classes, etc. Tools,\nheavy-duty markers, and other iModel.js subclass-style APIs should prefer this technique.\n\n## useMarker\n\n```tsx\nimport React from \"react\";\nimport { IModelJsViewProvider, useMarker } from \"@bentley/imodel-react-hooks\";\nimport mySvgUrl from \"my.svg\";\nimport { Point2d } from \"@bentley/geometry-core\";\n\nconst MyPin = (props) => {\n  const [clicked, setClicked] = React.useState(false);\n\n  useMarker({\n    worldLocation: props.position,\n    image: mySvgUrl,\n    isHilited: clicked,\n    imageSize: Point2d.create(10, 10),\n    size: Point2d.create(10, 10),\n    onMouseButton: () => {\n      setClicked((prev) => !prev);\n      return true;\n    },\n  });\n\n  return <span>{props.name}</span>;\n};\n\nconst MyApp = (props) => {\n  const [pins, setPins] = React.useState([]);\n\n  React.useEffect(() => {\n    fetchPins().then((resp) => setPins(resp.data));\n  }, []);\n\n  return (\n    <IModelJsViewProvider>\n      <YourConfiguredIModelJsView />\n      <Sidebar>\n        {pins.map((pinProps) => (\n          <MyPin {...pinProps} />\n        ))}\n      </Sidebar>\n    </IModelJsViewProvider>\n  );\n};\n```\n\nIModelJsViewProvider allows descendent components to use the useMarker hook, which draws a marker with the given options,\nwhich follow the imodeljs Marker API with minor tweaks. View invalidation is handled for you efficiently; you can pass promises\nto images, and the view will be invalidated for you after it resolved.\nYou can also pass JSX expressions to useMarker's `jsxElement` option and it\nwill be rendered by react and update correctly.\n\nSee examples in the [Recipes](recipes) folder.\n\n### `IModelJsViewProvider`\n\n| Property   | Type                         | Description | Default                                                         |\n| ---------- | ---------------------------- | ----------- | --------------------------------------------------------------- |\n| viewFilter | `((vp: Viewport) => boolean) \\| undefined`  | Filter which vps marker decorations are allowed to be drawn in. | Draw markers in all vps that can be invalidated |\n\n### `useMarker(options: UseMarkerOptions): void`\n\nThe options come from the fields of the\n`@bentley/imodeljs-frontend`'s Marker class, see its [documentation](https://www.imodeljs.org/reference/imodeljs-frontend/views/marker/?term=marker).\n\nThere are however, a few deviations:\n\n| Name in Marker | Type in Marker | Name in useMarker | Type in useMarker   | Note                   |\n| -------------- | -------------- | ----------------- | ------------------- | ---------------------- |\n| \\_scaleFactor  | `Range1dProps` | scaleFactor       | `Range1dProps \\| undefined`             | \\_scaleFactor as an option, so you can set it without subclassing (since it's protected) |\n| \\_isHilited    | `boolean`      | isHilited         | `boolean \\| undefined`             | \\_isHilited as an option, so you can set it without subclassing (since it's protected) |\n| \\_hiliteColor  | `ColorDef`     | hiliteColor       | `ColorDef \\| undefined`             | \\_hiliteColor as an option, so you can set it without subclassing (since it's protected) |\n| image          | `boolean`      | image             | `string \\| MarkerImage \\| Promise<MarkerImage>` | replacement for `Marker.setImage` and `Marker.setImageUrl`, accepts urls, loaded images, and promises to images and invalidates the view when the promise resolves |\n| N/A            | N/A            | jsxElement        | `React.ReactElement \\| undefined`             | like htmlElement, but the JSX Element will create the htmlElement for you (used to override the htmlElement) |\n| size           | `Point2d`      | size              | `Point2d \\| {x: number, y: number} \\| [number, number]` | for simpler code, useMarker can convert json point representations (arrays or objects containing an `x` and `y` prop) for you. |\n| imageSize      | `Point2d`      | imageSize         | `Point2d \\| {x: number, y: number} \\| [number, number]` | for simpler code, useMarker can convert json point representations (arrays or objects containing an `x` and `y` prop) for you. |\n| imageOffset    | `Point2d`      | imageOffset       | `Point2d \\| {x: number, y: number} \\| [number, number]` | for simpler code, useMarker can convert json point representations (arrays or objects containing an `x` and `y` prop) for you. |\n\n### How it works\n\nThe `IModelJsViewProvider` connects to the IModelApp singleton and allows the hooks to manipulate decorator state in react which is then reflected into the imodel viewport.\n\n## useFeatureOverrides\n\n```tsx\nimport React, { useState } from \"react\";\nimport {\n  FeatureOverrideReactProvider,\n  useFeatureOverrides,\n} from \"@bentley/imodel-react-hooks\";\nimport { FeatureSymbology } from \"@bentley/imodeljs-frontend\";\nimport { RgbColor } from \"@bentley/imodeljs-common\";\nimport { myAppState, C } from \"./appState\";\n\nconst A = () => {\n  useFeatureOverrides(\n    {\n      overrider: (overrides, viewport) => {\n        overrides.overrideModel(\n          myAppState.imodelconn.id,\n          FeatureSymbology.Appearance.fromJSON({\n            rgb: new RgbColor(250, 0, 0),\n            transparent: 0.5,\n          }),\n          true\n        );\n      },\n    },\n    []\n  );\n  return null;\n};\n\nconst B = () => {\n  const [isHovered, setIsHovered] = useState(false);\n  useFeatureOverrides(\n    {\n      overrider: (overrides, viewport) => {\n        if (isHovered)\n          overrides.overrideElement(\n            myAppState.selectedElementId,\n            FeatureSymbology.Appearance.fromJSON({\n              rgb: new RgbColor(0, 0, 250),\n              transparency: 0,\n            }),\n            true\n          );\n      },\n    },\n    [isHovered]\n  );\n  return (\n    <div\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n      style={{ height: \"40px\", width: \"40px\" }}\n    />\n  );\n};\n\nconst MyApp = (props) => (\n  <FeatureOverrideReactProvider>\n    <A>\n      <B />\n      <C />\n    </A>\n  </FeatureOverrideReactProvider>\n);\n```\n\n`FeatureOverrideReactProvider` allows descendent components to set cascading feature overrides in viewports, and\nthe overrides are executed in tree order of the components, so in the above example, overrides from `C` override `B`, which\noverrides `A`. The `overrider` property of `UseFeatureOverrides` is an analog for `FeatureOverrideProvider.addFeatureOverrides` which you\nwould implement when adding your own vanilla JavaScript IModelJS FeatureOverrideProvider. This hook is useful for when you want multiple\ncomponents to be able to control one `FeatureOverrideProvider` in cooperation, or when you don't want to manage notifying the viewport to\nrefresh overrides yourself when you can do it on react state changes.\n\nThere are no recipes for this hook yet, but there is room for one to be contributed.\n\n### `useFeatureOverrides(options: UseFeatureOverridesOpts, deps: any[]): void`\n\n| Option           | Type                                                                  | Note                                                                                             |\n| ---------------- | --------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |\n| overrider        | `(overrides: FeatureSymbology.Overrides, viewport: Viewport) => void` | the code to run in the `FeatureOverrideProvider.addFeatureOverrides` function for this component |\n| completeOverride | `boolean \\| undefined`                                                                                       | whether to skip previous components in the component tree and go straight to this one, useful for performance savings when you're overriding everything and allowing earlier components to add overrides would be redundant. |\n\n### `FeatureOverrideReactProvider`\n\n| Property   | Type                               | Description | Default                                                                      |\n| ---------- | ---------------------------------- | ----------- | ---------------------------------------------------------------------------- |\n| viewFilter | `((viewport: Viewport) => boolean) \\| undefined`  | A predicate function which filters which viewports to apply the overrides in | apply overrides in every viewport |\n","readmeFilename":"README.md"}