{"_id":"react-change-highlight","_rev":"40-ebf1282d5cb42214b5ac02494cef097d","name":"react-change-highlight","dist-tags":{"latest":"1.3.1","next":"1.2.3-2"},"versions":{"0.1.0":{"name":"react-change-highlight","author":{"name":"Medhat Dawoud","email":"@med7atdawoud"},"version":"0.1.0","dependencies":{"@types/jest":"24.0.18","@types/node":"12.7.8","@types/react":"16.9.3","@types/react-dom":"16.9.1","node-sass":"^4.12.0","react":"^16.10.0","react-dom":"^16.10.0","react-scripts":"3.1.2","typescript":"3.6.3"},"scripts":{"start":"react-scripts start","build":"react-scripts build","test":"react-scripts test","eject":"react-scripts eject"},"eslintConfig":{"extends":"react-app"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"gitHead":"551b4b195ad6863784771eb73c64ec3e88bff7a6","description":"basically you need to wrap the components you want to highligh on change inside `HighlightChange` element then pass refs array which are list of the references for the contents that you want to highlight and that's it","_id":"react-change-highlight@0.1.0","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-ymqVc9addgmW8KiERQrdtvcfSB7S9BN/dR0otNLU98UcDzmWRU/Fx5Q6izzkdtqaqS5z8z4SNjVceCr9uE1gcw==","shasum":"49641e1813ab7e639205bdc421f8609e4b558df1","tarball":"https://registry.npmjs.org/react-change-highlight/-/react-change-highlight-0.1.0.tgz","fileCount":9,"unpackedSize":5843,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdkPqKCRA9TVsSAnZWagAAmFQP/1pzqWapx/991HT08vTm\nWKT7FEB6psyE2/z3zuVDCqo/AvwqqlIJnxi8MCTf04ROeq4NQ+hQa1vu+ATq\nJ3sjMlSd+jJBsdKBG5VUpZLkqYFoEg4Pxi6ge0ZdBU9RJyVrOrh8dwWRop+O\nZl+yiJhbe1fLDlUn/Xai46efLqZDJ/M7M3RYC4NqyLOP+U3FybclD7esN48b\nCYORHTQeykUfUljGoxheCF9ldGPfR8g6OoP8T5truOaq7uLwJThrwweZYsfT\nAmUNLcOOYCUuaw7kjPqQ/m4JHjWuYblrVehY8p9O6ItKQrj37coRadGFFvk6\n69iKo2IfNdLXZP7h4Qrb2f91zAnEEgmKkkIBsvshumwgdKc+uTXn7HtFJyGL\n5850cbD1XB8gYfybqp0vHraYoTRNpiCk+J4DCa7TWpW0Vdo6TIN9b1JgTPtN\n/TqBxzom0DAokHXfnQ64Th+6WodiSLXnDx7z3CrhEmSmF+hirWjXLEzUjkN+\n2lPZ/NWDXOF7v3c5K2b+JgNf7CUquKgS4TrzGqqrwiL+k6N0M4kOESMdXcCF\nOufeTNr0ekMO1Eghi6gQeGVDXiwq4P5xLxrfpa8YMlcK04rDtp/oHKqNlshW\nH6SHDLWk4xPPuZ6TZGeeLKe9dOaegRXKtBgoencsYaJVlmIYaqeHby1mbn4b\n6bGP\r\n=0nXQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDOjOn3MI5Fvi3k3+qXYca7uzuu42QGE971u9R57vv8aAiBIBEW47TmXEJFcbDWmss1Bor9vV5oQD6FGIxm8amP0xA=="}]},"maintainers":[{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"}],"_npmUser":{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-change-highlight_0.1.0_1569782409647_0.6969338997498027"},"_hasShrinkwrap":false},"0.1.1":{"name":"react-change-highlight","author":{"name":"Medhat Dawoud","email":"@med7atdawoud"},"version":"0.1.1","dependencies":{"@types/jest":"24.0.18","@types/node":"12.7.8","@types/react":"16.9.3","@types/react-dom":"16.9.1","node-sass":"^4.12.0","react":"^16.10.0","react-dom":"^16.10.0","react-scripts":"3.1.2","typescript":"3.6.3"},"scripts":{"start":"react-scripts start","build":"react-scripts build","test":"react-scripts test","eject":"react-scripts eject"},"eslintConfig":{"extends":"react-app"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"gitHead":"08e63ecadfe9295baf75bcd262c2dd53d65c9367","description":"Basically you need to wrap the components you want to highligh on change inside `HighlightChange` element then add `ref` attribute to each child in this component to be used to be highlighted.","_id":"react-change-highlight@0.1.1","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-0FTgH+rjy/8zS0IFj2orJDrSEYJq4N4WkPbA/BkP0QuZoN5atoV/Yz2GM7qnJO4SjAMS0+djG09q3VY1+IeWmg==","shasum":"3d4ab2212a749a2a9e45acedc98c051b6e20ec99","tarball":"https://registry.npmjs.org/react-change-highlight/-/react-change-highlight-0.1.1.tgz","fileCount":9,"unpackedSize":5850,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdkPxhCRA9TVsSAnZWagAA2JwP/2PMf7NbL7gJTQS2acwL\nTUS+yt1wpZWDuiGdvTqFlS0J3hWcELkXzS69I/gtm/fF8kfGPXjsT2O3SZSj\nmniFX54HiY7FSgreoPI3xC5CTaY5W3OieIVqDA6BbRuxYt9b68/KeeGLu0fp\nnf7vBqieFFLesjIlblufQSBvsEyzjO8Yc4nQQaauvoxLsjiNSbAJk0YM8UDH\n6oLIItZ7F4eILv6fr8filrfZfdiBDiwrS69cZmC91dGPUB1AGyU0gnXOAH/K\nyB1ZRJN2dsVkNBkHRQoBpbua4bTCPk7YlalfbngQA006G+bqGxuhPf8Hwk8p\nezghwwsYCzSRZ7Ae0IL0YwI1TXZ++I7ICJy2or1qvJLlz70gfsBYRm2VL8G6\n6SD0e23cZ09aW5u05BC+EkZYnaX4Ryr4lwzx962WW7mOMlUomOQ5lcsg5GxE\n5Zja6it0hrqnqFp3c5ro/vqg277/+dHFFI3PXF1R33pJMhyr01pS+jF/QuSP\nf/QCf3kPhG5itUC3TjKJt6x1iwgSI2YX7UDRq8vn4uY6H9XaZ89sqj8jA/fE\nY7NH+IEw0O/kSJtadZemyucJrElErfWBhhEERql9oQ5jB67b8HvHZHu/yztk\ns68tX2vitzq6fG33yhk0hiET/RRiy/arT+TBfnz5Bs3AOh17Hg8npnxu77rI\nwNLE\r\n=03/4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFZyblTxhvT0zEz4N5cYpScsOVZtLM2Was9FQ0Hr2IzwAiEA98sSL4CbKk742NYbzU5bufPK8syRZJ578EwGYXFfkAA="}]},"maintainers":[{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"}],"_npmUser":{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-change-highlight_0.1.1_1569782880923_0.7317279099418832"},"_hasShrinkwrap":false},"0.1.2":{"name":"react-change-highlight","author":{"name":"Medhat Dawoud","email":"@med7atdawoud"},"version":"0.1.2","dependencies":{"@types/jest":"24.0.18","@types/node":"12.7.8","@types/react":"16.9.3","@types/react-dom":"16.9.1","node-sass":"^4.12.0","react":"^16.10.0","react-dom":"^16.10.0","react-scripts":"3.1.2","typescript":"3.6.3"},"scripts":{"start":"react-scripts start","build":"react-scripts build","test":"react-scripts test","eject":"react-scripts eject"},"eslintConfig":{"extends":"react-app"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"gitHead":"640e41bdbb34fcd0cb53298e96c1b440b4e4b935","description":"Basically you need to wrap the components you want to highligh on change inside `HighlightChange` element then add `ref` attribute to each child in this component to be used to be highlighted.","_id":"react-change-highlight@0.1.2","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-LNjcnC3Un9KWVYlBsZRcsTlAaEnX3DrMxi3HqaKKoWNoNU3OzqjUb+Y13WaIBAdy/VtPFMyv28lmFkRpQ7ysLw==","shasum":"71153754953326165efb88e8d7c8e0068d50fb5c","tarball":"https://registry.npmjs.org/react-change-highlight/-/react-change-highlight-0.1.2.tgz","fileCount":10,"unpackedSize":5890,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdkQNnCRA9TVsSAnZWagAA9I0P/RPgHxilwx5LYTorGGl0\naSDtxOJ5D6Spm91q8IsuZYAA4bF+zWE7C+l/d/3JaHZ/9aEJJg3ovgYuyWj8\nq1OEwk+IUa0tJxak1SuQv8ZgbU/Syn88/QYIgyYr5IPg1bVM3h8Tqx6cOJeF\ngyoeL0hFHmmmhmfP5t7d/urjNspL9ePL4pFCz2EPpCWD81cOPM+U3Kv6A3EJ\nwOu9OxoKbFGFjz2a/48qCiRZgoo08soBS7SWYeTDrLz/H/VPYrEMdkFBdtB+\nnVQgwEUnqPfICVH6ULxYnRLrMHv9r8c2oIQoGrVkgF2o5gNquG/S5qbk3Iwj\nqZJP36yqzyBgdC6re3BS9/Uf0giqPMRo8ShlH23DSPgkPUGwI37YZpBL/i6D\nClPwUNx/R+N/fc4IrdJ+6qkC3HcgDGQpf8+EowS+f/hpd20J53O5satUZK0P\nvOdQXoXRTp9eOZbtL0M1/n+P8XRsxTpsI6MQkIqo0U7jMEP9gvyv8TR8719K\nB0tUkWlJCH0a0EBizrDpWoIYLW02vTPX8lKhI3OeQ69v2RNnvyj8xKvh8LyR\nsPHBmHhNm5me6oJq4wSYmCCbctZihmW5UiL5H2O/iCnEJ2eZnDoEoUCXkGqT\n0sSQh5ck9kUz1H38Y0XGTnTqO+BihLvkB9s9de3WCekq7GDJ2zDfKcHDyNcU\ns0/m\r\n=wSGs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD9qqpgD3DjYlc3S9ldFrtmZlOS5ryS3P5/e0bopbGkQwIgYytLxTaWeAsruGqlHKOc4p8sCz6RrzCmCuXA4y6OyZM="}]},"maintainers":[{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"}],"_npmUser":{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-change-highlight_0.1.2_1569784678498_0.11687232438714301"},"_hasShrinkwrap":false},"0.1.3":{"name":"react-change-highlight","author":{"name":"Medhat Dawoud","email":"medhatdawoud@gmail.com"},"version":"0.1.3","dependencies":{"node-sass":"^4.12.0","react":"^16.10.0","react-dom":"^16.10.0"},"scripts":{"start":"webpack --watch && lite-server","build":"webpack"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"babel-cli":"^6.26.0","babel-core":"^6.26.3","babel-loader":"^7.1.5","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-plugin-transform-react-jsx":"^6.24.1","babel-preset-env":"^1.7.0","css-loader":"^3.2.0","webpack":"^4.41.0","webpack-cli":"^3.3.9"},"license":"MIT","gitHead":"afc43236e78ed3ed4238ad3f1b1798d975f907d0","description":"Basically you need to wrap the components you want to highligh on change inside `HighlightChange` element then add `ref` attribute to each child in this component to be used to be highlighted.","_id":"react-change-highlight@0.1.3","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-QM1KP0c3tDHoYzVPuwtXakcQuqGaKzmFebxxJmnpJl4yIzhUurSvmp79ySoK75FaT8b3vhW5B2mpdsfdVen/Kw==","shasum":"851aef006b984b6064456fd5b2f9c7541d49a52f","tarball":"https://registry.npmjs.org/react-change-highlight/-/react-change-highlight-0.1.3.tgz","fileCount":11,"unpackedSize":6439,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdkSmrCRA9TVsSAnZWagAAEcUP/RBfTUx//ptVY1wkq9N9\nw+axVt7CW1uhqJqKmm8Y26+Wz8NGG80bjFJVEcfGgX8is/ZMpOwTwV8vKYXA\nRGDwyB01GZ5c8HSwilyBS7cFFv1WhJU55F0fnoA8tEx03aBJRo8pwGxdDVmI\nZto9P+U3+oVFah6R1QfEye97oSgefX87QlKdAXib0aFRTSYpOpwIgRvoMqaq\naObJDiM96simbSOuqjEXY91I6ihkA2G3mSxS0EA5/5uXJY0UCqzSukYhVifw\nt+B7+uGP8CMK0glB0f20awRF7RjDT/02Vk7ED65/9ct2S4pfu+mdmJJ6bYFv\nyv0mm0MTM2hsXGmBnHpggySOItfL0jtENTRWwlBk5kT4vxjAATI9iIQaguIG\nNqzldkdxEdb822N7kxMkhIbNHTHqd+kzVl33Y6deXHvKaBmP/LANFaYycXql\ntjpHLHFOpDQ90+BdxAZjTImDWMi6Mk5SU11JaBTbfZFuXUeY2FawFZWrwJoL\nkjlwHzlKX4vrqQ1mCbVw2m9+plWop9P3CZXzy1PkL+B/Y1+qpW50coU1pGKQ\nXaTUh3sUTsbepXe3c9zkg+FvQk0S05H3X3+AORAtdeexuUDwD8oq41tlEuxa\nT7rTTwo8s7ad1zdlGO1mRhEDj117wJfxuHgJGzGaDlqYJ6AuahjzRlXQ+qoV\nnYFI\r\n=DRiw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC2chXmY8SFCZij1vs6d9zgdkuXisG7T4bIed5NLiQTVgIgf0IL7WAeNhUDXh+ekWOkgqb4ZQ5AG6tiOZMB6H/ZJnM="}]},"maintainers":[{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"}],"_npmUser":{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-change-highlight_0.1.3_1569794475232_0.5348396613732131"},"_hasShrinkwrap":false},"1.0.0":{"name":"react-change-highlight","author":{"name":"Medhat Dawoud","email":"medhatdawoud@gmail.com"},"main":"build/index.js","version":"1.0.0","peerDependencies":{"react":"^16.10.1","react-dom":"^16.10.1"},"scripts":{"start":"styleguidist server","test":"echo 'pass'","build":"rollup -c","postbuild":"npm pack && tar -xvzf *.tgz && rm -rf package *.tgz","prepublishOnly":"rm -rf build && npm run build","release":"np"},"devDependencies":{"@babel/core":"^7.6.2","@babel/preset-env":"^7.6.2","@babel/preset-react":"^7.0.0","babel-loader":"^8.0.6","babel-plugin-module-resolver":"^3.2.0","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^2.1.1","np":"5.1.0","react":"^16.10.1","react-dom":"^16.10.1","react-styleguidist":"^9.1.16","rollup":"^1.22.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-peer-deps-external":"^2.2.0","webpack":"^4.41.0","webpack-cli":"^3.3.9"},"license":"MIT","description":"Basically you need to wrap the components you want to highligh on change inside `HighlightChange` element then add `ref` attribute to each child in this component to be used to be highlighted.","_id":"react-change-highlight@1.0.0","dist":{"shasum":"aac60b9bd0922644893d6f44fe3acc90f0472e7e","integrity":"sha512-wUBAeYUOOwGpKMBWzBj0X7JE321U7j1NLSfS9fRBMruUbn8271I7HVd8E/2Gvc6LU+O2fDn9l86F+ZPPWmMexw==","tarball":"https://registry.npmjs.org/react-change-highlight/-/react-change-highlight-1.0.0.tgz","fileCount":5,"unpackedSize":4838,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdkpPpCRA9TVsSAnZWagAAnQIP/iYK9OWdVAJTu9MR5c13\nwgzLzcLQ2FO8pALZFUPfvC+aQ8wo/GFcrv+OZyj04MkLH1pmjPy/UZ4S6qQq\nyZg26EX4YtP3SDEikji1ujpdBM7dJ+v43Bu1ZDQ5ljLPFVw5GJWqkXEx2MEG\nprYH4NPqbPDqNbKD5zA6ntsg3PNudnzxEkfR47ls93FtdC9sfWn2qywj9Wnc\nC+xaUJQBRx/o/Oe2t/2aOjFBEXwVkppeySx4mA5tNW8j2k/c1PuqnErtLR1d\nzLFvg5kNbnc5CfYCjsiME0+/oBB7ZXnu4ufYHFcUNXyGCu3auB/+Higc1s3d\noi1Edr7yp3YpkWsKetCob8l0nowsxIGl2qrMdiPFKiFmVl7zHSlic3q6EVFA\n3QeAc1v6BtJKKEOv4cV02IiqAnBZrYPTOBbEwOuwWTSdR9mFn0WS6ugPcRVn\nK5qDhoZEkplk1lPTN2juzc7fkUT4Ckr38bkYevP6glisQbawgbw6jfUhIMwW\nNe2IJFM2fCZQwMVL5R+Q1YVTJhcX0jfBLJiqx3rg3SmshmE70dSqheP07GZN\nx5+FjPngbnQfkBX6C2HbRhgABeRwxe6PEdfw379YwvC0LfGH4Z2F2HaxLLCD\njA2RQIW95uUNW+7rqgXe9T4YGnzrkCqP8n7kiaO2E7YyD/EZ1G5D/VuJ1H0H\nkqyx\r\n=Vzrj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDV6pW6ymcZs4cOBKkl3lLhzry4T2bs1Zp3A/Pxh0DVCwIgQYnk6eiuJVgDU8/pcDrrsaAL3TtkvAnddmMFoWr3D5E="}]},"maintainers":[{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"}],"_npmUser":{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-change-highlight_1.0.0_1569887209422_0.1475073021131872"},"_hasShrinkwrap":false},"1.0.1":{"name":"react-change-highlight","author":{"name":"Medhat Dawoud","email":"medhatdawoud@gmail.com"},"main":"build/index.js","version":"1.0.1","peerDependencies":{"react":"^16.10.1","react-dom":"^16.10.1"},"scripts":{"start":"styleguidist server","test":"echo 'pass'","build":"rollup -c","postbuild":"npm pack && tar -xvzf *.tgz && rm -rf package *.tgz","prepublishOnly":"rm -rf build && npm run build","release":"np"},"devDependencies":{"@babel/core":"^7.6.2","@babel/preset-env":"^7.6.2","@babel/preset-react":"^7.0.0","babel-loader":"^8.0.6","babel-plugin-module-resolver":"^3.2.0","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^2.1.1","np":"5.1.0","react":"^16.10.1","react-dom":"^16.10.1","react-styleguidist":"^9.1.16","rollup":"^1.22.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-peer-deps-external":"^2.2.0","webpack":"^4.41.0","webpack-cli":"^3.3.9"},"license":"MIT","description":"Basically you need to wrap the components you want to highligh on change inside `HighlightChange` element then add `ref` attribute to each child in this component to be used to be highlighted.","_id":"react-change-highlight@1.0.1","dist":{"shasum":"c38409241fe178fc41c06b8d771e08905b84df9d","integrity":"sha512-g26QUFILuB6ICw0hZsOAiwGmzbG6rlzoYHoXzcdsYqaxpfgLKUXcQnz0LJfaNxIy8mf3xxeAywt34OafySMCsg==","tarball":"https://registry.npmjs.org/react-change-highlight/-/react-change-highlight-1.0.1.tgz","fileCount":5,"unpackedSize":5520,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdk8igCRA9TVsSAnZWagAAts0QAJaO8IBoy1StwCRe7oKV\nNA+GVRsbeiPPkWqwIwZFH0YuiRXCDzxq2fQ40Q7Ny9GorXAKH+H9BDiN8oCW\n1Q2ZZ6jBIOwcYWXp0WoK5agZMqwzOUisQRtcr+hs3nOhAhxIpBsZCfzo7FKb\nbi1Av3/Edg1Wdjw0WShCHInLJOdgJVhJ9FFGenHa0yCVpXNfuqyIkbtB3EJl\nHGy8tvqp0v794WbL3+YQJx5twKWanWPNNrZaJfEhJ3tJhdDe8QC/2VVpF60z\nAUtrqOrrOSqNUa+w4k7zbvFPea0ph6zUMAcUjBbuP327gOHG9WhchKsyWD5l\nfMfnQHsBBDDlojazf7iDLsYAi2rn1ltrogApPUIkaqf9z1n1ai4eRzW9oElm\nQi+M4tuCKuv92Xqm/UT5At7a5xcykuIaRSdUU3j24NGTmAlthik1JQfSKncT\nt+sdChIuqeNdjf05wO20CWYopiS9kBc78ftZdAmwqX1bLj7J9xoAC9RqS12B\nHX+5C+WhF/0AgGkQgip3IaYX35n6VU55J+siBY+HUWPicRLFq1b9H/ZiWwc8\nqcR5UV48WAvLhVWNXkB7TgcvuuYY01fYO+UkqQyP26K3FJ2N5rMBvQk7csSC\nc0w1Kt2wxHFFqq2RTCnI/wAD/6Bpd8x9nLVewC61Q6TcBpmEMLL1ATl2yUsO\nE8c0\r\n=br1h\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCwb73GMBFMewhTAkHrvdFLmNscT7Zo1ANUa4GuYiaKpgIhAKR+LQBOFNhaYILxfsBSRaTElbVsI10dxEhH/Nn/fmHr"}]},"maintainers":[{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"}],"_npmUser":{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-change-highlight_1.0.1_1569966239373_0.5482346189663054"},"_hasShrinkwrap":false},"1.0.2":{"name":"react-change-highlight","author":{"name":"Medhat Dawoud","email":"medhatdawoud@gmail.com"},"main":"build/index.js","version":"1.0.2","peerDependencies":{"react":"^16.10.1","react-dom":"^16.10.1"},"scripts":{"start":"styleguidist server","test":"echo 'pass'","build":"rollup -c","postbuild":"npm pack && tar -xvzf *.tgz && rm -rf package *.tgz","prepublishOnly":"rm -rf build && npm run build","release":"np"},"devDependencies":{"@babel/core":"^7.6.2","@babel/preset-env":"^7.6.2","@babel/preset-react":"^7.0.0","babel-loader":"^8.0.6","babel-plugin-module-resolver":"^3.2.0","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^2.1.1","np":"5.1.0","react":"^16.10.1","react-dom":"^16.10.1","react-styleguidist":"^9.1.16","rollup":"^1.22.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-peer-deps-external":"^2.2.0","webpack":"^4.41.0","webpack-cli":"^3.3.9"},"license":"MIT","description":"Basically you need to wrap the components you want to highligh on change inside `HighlightChange` element then add `ref` attribute to each child in this component to be used to be highlighted.","_id":"react-change-highlight@1.0.2","dist":{"shasum":"671cb429110fde9e7204cda196d7626eb8fc675e","integrity":"sha512-5gEoe2qSJJqthONOauYSPZU2YjOLvFNrhOLrVCvPOk5hmFEwzzPtTd4TXUBtTZPDhiIIPKCdbfyxAwrfNwhF1A==","tarball":"https://registry.npmjs.org/react-change-highlight/-/react-change-highlight-1.0.2.tgz","fileCount":5,"unpackedSize":5761,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdk9GXCRA9TVsSAnZWagAA6OQP/3gyohfRzqeZiZSU32oA\ncqvIttbvjtT90iELX/ScO79lvefRGjNPxCpO2Hv4Jw59QMFkHnkvsn+AV7BV\noXJjopY7ui165940CN1lRcnWxleQ8FOYRrbWnc6CRE/Qy4Qv0gOeSmhdl2RR\nuYIkFB91Kq2VDYX5iuUOU+q2X7AlkQLnesk8AXsdkdLTvCsNM6R/ycwLbV/q\nEn+thxHCfncFAdVVEF2KiJkY4PbkulxSkev5PUe8VlVgP7LeCA8UbMY9jcrD\nfZb869RQ/JfUnJ1rA+q9hgkXRpc/akJZYdjikCZIFZlTw5Iyj1zFKq+v+Bqe\nTiD7/G6YRzdhUHOMd764Qo1bv7l0GcO5WIjiCnWiR6A6lG2VCixcRKZcColL\nEidhvKQJoSbMjEVXDrygVDC697aaqGoTCvEu2fle/kQgOFJhmN236PvkqxsP\nkgtNt4jNzJn7j+old4Yc7NTAODc/qJuLi9eyJo+B3nVJgCAzdaskWZAltwuJ\nARKHN3ygZg9v8jqpUXQHrInThX6ScrH8rPkfgBYoIVx4ZgT8t/Dy7tr2VyHD\nXQrGHC3saskmMLkyjwsdowDXtFhpenOC4WDS1JV5Urv3FmT2CQMhxASNFqoV\nK7GoXZIsdt3bYME4uJ9KO3neNpkRujd4lqg/LfaXM/LYxI8oHCP0RCfHdCjB\nvbJ3\r\n=qT1S\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF0DcJ1iHLRcRaA/C1kwLDoWDtE8OyKgEwW7khtRAeQ3AiBzXEWlocEuJQKDeKgeanoue0qs67VqYpca/mHXZdZbpw=="}]},"maintainers":[{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"}],"_npmUser":{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-change-highlight_1.0.2_1569968534820_0.80014143397381"},"_hasShrinkwrap":false},"1.0.3":{"name":"react-change-highlight","author":{"name":"Medhat Dawoud","email":"medhatdawoud@gmail.com"},"main":"build/index.js","version":"1.0.3","peerDependencies":{"react":"^16.10.1","react-dom":"^16.10.1"},"scripts":{"start":"styleguidist server","test":"echo 'pass'","build":"rollup -c","postbuild":"npm pack && tar -xvzf *.tgz && rm -rf package *.tgz","prepublishOnly":"rm -rf build && npm run build","release":"np"},"devDependencies":{"@babel/core":"^7.6.2","@babel/preset-env":"^7.6.2","@babel/preset-react":"^7.0.0","babel-loader":"^8.0.6","babel-plugin-module-resolver":"^3.2.0","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^2.1.1","np":"5.1.0","react":"^16.10.1","react-dom":"^16.10.1","react-styleguidist":"^9.1.16","rollup":"^1.22.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-peer-deps-external":"^2.2.0","webpack":"^4.41.0","webpack-cli":"^3.3.9"},"license":"MIT","description":"Basically you need to wrap the components you want to highligh on change inside `HighlightChange` element then add `ref` attribute to each child in this component to be used to be highlighted.","_id":"react-change-highlight@1.0.3","dist":{"shasum":"5e5474057fe09276033bd6862c3978fec0f2a510","integrity":"sha512-9xEWwmFALKNfZXtow+vxkDRYXkxhz4D0JZIDdvVuieBDaXcfiHQlsT1eNQ8eFvxZO6BKG5hyvbtdrlc2uT+UAw==","tarball":"https://registry.npmjs.org/react-change-highlight/-/react-change-highlight-1.0.3.tgz","fileCount":5,"unpackedSize":5696,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdk9LtCRA9TVsSAnZWagAAoF0P/RV7zvkICrwoygAHeE2B\ndn3GZd9lJax+//bb2iFQo07GA+9kSR1YZjdBW9kvtGW+CrReaxHilkc3V7mW\nsfia6j1dtI7ovIYM5ynmR8psXOUyMV4nGDnMRWvNOTdbdbWXOwDOA3XBqivn\nbEaz1zxbUB/1vQB8QMd2ft2ks2MeymczKaabR2dVlDi+XS8Od3ynSzjMIwEP\nKjd5qAtpIrEZZ7swKZpd8ZyJ9SgWMNi3j1Oe9a2bh6uLw0TtiwnM1gxGwsEj\nAAqOuSSmiTJzZ92Ssh3k5ASqB1srjH+Gstjp77F87134TR+I3C9VyKj75Ii1\nZ0Oe9ofQivSYNRg9UGlIi1g5LEft2RXAfbZUjJtOA9Ud2lkegdasT6TPeZUc\n4v3UcEwxkoba3/9eRLInmIc1L3z2SzLLoRCYWq7ovoWBryBNbfyiYyY2Z889\nsxutkzhX2EgPA79wHHbq3kcmlh6MbD02ZOCTR0jGxYMqBFLDcLtRjKdBH8Yv\ndTBY3Ie0LIq6zouNNDt15Y/NyLsYhBIP7zF00l3PdG2VgNnZEmbDVWpFpLuc\n3k2ykiOXvQk1FqlV+KZdj5VloXjGwO6XdOuGvbJlVEmWvZKiViprlhRepRZL\nIJ0ShW9asBkn08vRoBXM12+/L4n1F/Jl2qY9TvlTjGWp2W7Q2I6a9/znCPSu\n0jZa\r\n=qUJx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBD3Prf02X1UuiH6mmn3tLI7cDM8XTD7TbHmYNb9NCt3AiBET3L6xdnwaSxIN7NbpIt+WdpVUpdWdhThwHYS208C2w=="}]},"maintainers":[{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"}],"_npmUser":{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-change-highlight_1.0.3_1569968876920_0.0641855571846226"},"_hasShrinkwrap":false},"1.0.4-0":{"name":"react-change-highlight","author":{"name":"Medhat Dawoud","email":"medhatdawoud@gmail.com"},"main":"build/index.js","version":"1.0.4-0","peerDependencies":{"react":"^16.10.1","react-dom":"^16.10.1"},"scripts":{"start":"styleguidist server","test":"echo 'pass'","build":"rollup -c","postbuild":"npm pack && tar -xvzf *.tgz && rm -rf package *.tgz","prepublishOnly":"rm -rf build && npm run build","release":"np"},"devDependencies":{"@babel/core":"^7.6.2","@babel/preset-env":"^7.6.2","@babel/preset-react":"^7.0.0","babel-loader":"^8.0.6","babel-plugin-module-resolver":"^3.2.0","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^2.1.1","np":"5.1.0","react":"^16.10.1","react-dom":"^16.10.1","react-styleguidist":"^9.1.16","rollup":"^1.22.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-peer-deps-external":"^2.2.0","webpack":"^4.41.0","webpack-cli":"^3.3.9"},"license":"MIT","readmeFilename":"README.md","readme":"# react-change-highlight\n\nBasically you need to wrap the components you want to highligh on change inside `HighlightChange`\nelement then add `ref` attribute to each child in this component to be used to be highlighted.\n\nstill in the development phase","description":"Basically you need to wrap the components you want to highligh on change inside `HighlightChange` element then add `ref` attribute to each child in this component to be used to be highlighted.","_id":"react-change-highlight@1.0.4-0","dist":{"shasum":"2bfdbd3c02ca99384982909e1f38007c602c4502","integrity":"sha512-glg929UNYR8SABy/Ty9n/d2o0FQvMxp3rR+LdXXzt2dpy/lwkiHg64TeQP6kzWbXJnB+CQtX7AVm+kVkYTLoMw==","tarball":"https://registry.npmjs.org/react-change-highlight/-/react-change-highlight-1.0.4-0.tgz","fileCount":5,"unpackedSize":5736,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdk900CRA9TVsSAnZWagAAS24P/R3zoQMOvEIP7C3CfOCD\nTNrXmhRZ/VSvV0CeEYvEwgqadhpZVJJgq3sAq54AQgcx6pIUULY7znKISPRI\ngcPiMPpsKQsgBS3cqqatGK51v1vZMY6SxHiS2L2bayjPmEvB1Sh14fEl4BVN\nB04CgZV+rTxEjUO1c6N0XOrt8awA2d7PRNF4aCC5WMc479sKeF2FbjnuVDUw\n9L2JN4jeK+r+hFLP4ZG5d1RJrpmt1+DYdRGxjf+ad3rBr2rABLLVaHEJkb5i\nSgdxolUhoAr+G3ddb24WeI+d4RlQV3tRh/yZntKW+fNWY9hZJKTAUQBYKwo8\nNfA1obWei4LJBqIk1gTf2QKJdEEMszLB7O4Vw84++CoZWuQ29yFpVeiP+aZR\nNjZ6OuYWeFXoPg+15QfnnsyPVtyEPQxSwTp8hJEF1LTWChWA9fX0XM99uhNN\nHCwPSZLI50VK3da/kuYrsoq56XW6mNt/soboh3Fvukyqv+vUco6PMMYYQTVY\nebQDgdJfhIL1eiELxqhppZhEwrI/4z0bZLIGcATRf2kkBdL2yQ9UPluq1wk/\nmKyYZs2BAJzLQdRPO3dMj7OA2DPBHv64HCAGly0mw/tIpIrG1oS23JyyCA47\nPF+wrT2h2tS5MJcypMjvJT7OXKtk2GAAzWJzH1rpUqhU78fsm6b/IvyYGDCn\nIY/g\r\n=/P0E\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDP2I5aH4vQB89FcWhndzUBZJFbRHhnBPHCo5UIKsGsogIgfvQUo+HSebXshhODVFd3r1s0oJeHwsoul4Et21nt4ok="}]},"maintainers":[{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"}],"_npmUser":{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-change-highlight_1.0.4-0_1569971506953_0.11065328990012202"},"_hasShrinkwrap":false},"1.0.4-1":{"name":"react-change-highlight","author":{"name":"Medhat Dawoud","email":"medhatdawoud@gmail.com"},"main":"build/index.js","version":"1.0.4-1","peerDependencies":{"react":"^16.10.1","react-dom":"^16.10.1"},"scripts":{"start":"styleguidist server","test":"echo 'pass'","build":"rollup -c","postbuild":"npm pack && tar -xvzf *.tgz && rm -rf package *.tgz","prepublishOnly":"rm -rf build && npm run build","release":"np"},"devDependencies":{"@babel/core":"^7.6.2","@babel/preset-env":"^7.6.2","@babel/preset-react":"^7.0.0","babel-loader":"^8.0.6","babel-plugin-module-resolver":"^3.2.0","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^2.1.1","np":"5.1.0","react":"^16.10.1","react-dom":"^16.10.1","react-styleguidist":"^9.1.16","rollup":"^1.22.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.3","webpack":"^4.41.0","webpack-cli":"^3.3.9"},"license":"MIT","readmeFilename":"README.md","readme":"# react-change-highlight\n\nBasically you need to wrap the components you want to highligh on change inside `HighlightChange`\nelement then add `ref` attribute to each child in this component to be used to be highlighted.\n\nstill in the development phase","description":"Basically you need to wrap the components you want to highligh on change inside `HighlightChange` element then add `ref` attribute to each child in this component to be used to be highlighted.","_id":"react-change-highlight@1.0.4-1","dist":{"shasum":"561554a397a926a65b5d36f0b33f6264affdc2a4","integrity":"sha512-FQ/E09DpINAsn4WNombeA/qIR4HslDyPK6DmcqBja0XvfvmFwaEA+lVdTHSJcj3apxFvune4kSJ0Eg55gh2MUg==","tarball":"https://registry.npmjs.org/react-change-highlight/-/react-change-highlight-1.0.4-1.tgz","fileCount":6,"unpackedSize":8028,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdk+JYCRA9TVsSAnZWagAADToP/i5gJ7DdgS2nzOAiFutM\ndmw0yWVZyaRM2Vj7rgVYYrKIddSG8QBs8qKfjMadIYpSvltYeVPTNcqTofIi\n33MykVB7tdyrCZs8H1B+q/ly3+TqHRXFxXXfmQNVTTu7QFNlxAqNFyB1mZCC\n4pnJ0/C0QaKzupSchELOAgNLMVf4k1RrQzsTun8QHESar3cOb8fWKiuM3w9s\n2m9igc6SoYwVxX4roISXY/hKGQJy6LRz4a+vnD1E0mv/ShgdFErpO6WNt+QO\nO2rB9l1I37AuoGl/eTaY0d/ctPvjF+jL10AThskJbt84uUcLkqegoTZ/HPgK\nVo1Jtz/pAYgrd36RlmQUAr7963U5wdfMoT/KCN1cRgV8L30wkAqlZ3ul8+LI\ncJkBPs3h31hCGylTUKe+c7fwzH0GtYte2ts+7ZNZXM1B4ljuuOCF6ni/EAww\nbT2XJ8u3yI4ssKeatwZIjOYNuYR77rI5KeB7EY1k87WEyYB3vB7oZSqqiukQ\nPfaB3LOLxtKWNPSADEaGFNt4jl90czsaww69sc7gQsiUjSdtrmewK2FsTjA2\nCLVAgYsIsJ4BVok45dwTTPi7jfLljBtPmeIJGNSvVkmEwb9R/sOvLAee7qkP\nTZPtr132FMBN8k9q1vZijl3vRAO8Kw9m8tac4lwD6R15KzhkjRPET23ZpbsB\n7MUt\r\n=NATg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCHU1mzrXP2Dw27XCp1/laatLCvUH7thFbWLshE/XzXKgIhAOrtUce3YKGFsoLaeUR0nnLQqGygxjDQ3SFW0vFX1emG"}]},"maintainers":[{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"}],"_npmUser":{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-change-highlight_1.0.4-1_1569972823824_0.8613746208584019"},"_hasShrinkwrap":false},"1.0.4":{"name":"react-change-highlight","author":{"name":"Medhat Dawoud","email":"medhatdawoud@gmail.com"},"main":"build/index.js","version":"1.0.4","peerDependencies":{"react":"^16.10.1","react-dom":"^16.10.1"},"scripts":{"start":"styleguidist server","test":"echo 'pass'","build":"rollup -c","postbuild":"npm pack && tar -xvzf *.tgz && rm -rf package *.tgz","prepublishOnly":"rm -rf build && npm run build","release":"np"},"devDependencies":{"@babel/core":"^7.6.2","@babel/preset-env":"^7.6.2","@babel/preset-react":"^7.0.0","babel-loader":"^8.0.6","babel-plugin-module-resolver":"^3.2.0","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^2.1.1","np":"5.1.0","react":"^16.10.1","react-dom":"^16.10.1","react-styleguidist":"^9.1.16","rollup":"^1.22.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.3","webpack":"^4.41.0","webpack-cli":"^3.3.9"},"license":"MIT","description":"> React component to highlight changes in the wrapped component to enhance the UX and grap the focus of the user into the changed value of some parts like the cart in an e-commerce application for example.","_id":"react-change-highlight@1.0.4","dist":{"shasum":"5a4163fef8ba7321f082f1fc34de475ddae891c1","integrity":"sha512-5LoKZHaTcfopOMt7tP9vpDUUFFqEtAIIYwAaYsL++3sLzHV3ePm7q7Ir6yP3UB7Sfn3bFDGAu33uDBgkT75WDw==","tarball":"https://registry.npmjs.org/react-change-highlight/-/react-change-highlight-1.0.4.tgz","fileCount":6,"unpackedSize":9493,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdk+sJCRA9TVsSAnZWagAA8hMP/2Uts9RKgFYXIwX+aB9j\nMTQadMsJI1jLnSt/CeNmB2iNkiy+eVSRt7FXPs2R3lxwoij5FfO1K0gGYXOR\nepZyrTD9u7UgtlOE37ElytIZy+9/qXmJeG7X3toBk4sh/r/bXQwhPPZosqT3\nNXJLh97JRJDnhP5CBTlusm9lJ1CJyzES4TtZbLUfe6aXNXnpQw0Fc4+vmzCq\nw4YiFRTX9q7Uir/TZsoT3STxwnJ9qpeCybR+mVP7OL09SlTMeutLztM+fHG5\nd1bA7hQ/iJDBhD4Mfw6386oYhrC7jLGi+R/pQk9gh6CuB6hvvc7mPcTBeDu7\nTkoyFdax+noutrlZpxCU8I8t4hZS6gI8U4qbZakl3YsCCeX45XiCAdb3JZTg\n51JXofAUcriC4y9o7OdQapkrCBMaoapwfiuvnftdfS/oX8LrS8/CuaauP/Pm\n7de/8P/tPrt6CPf5nGAM/mLShCng+N0eFxZ6RNJZVJFifkxmWoRveP0nlKLQ\nzMFOCPvNm6HwVJ/Tt2TvcYiKhEpaBd7gPA8W9vy3C1iTvB0MnQU/hAz+WABk\nyYqC8GSI9Fn76JFnJH8TYdhU/m5bcnLzDvUydUyLe7FZq20hg/Tcf2W/6Jvp\nKpMGfmCVwdZE3gPTAjoISPFyeKIVOQWis+v+1CwKohN6fxxKUDx2nwqPNZhj\njCQw\r\n=9EP8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF4/bBwOgmQQz31vUYPZXzkh+QTj0OoXb/Py3GyiZNioAiEA1KswCwNqfME2tXeHHx0DTjsosddvdweLmgDvyirUtHQ="}]},"maintainers":[{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"}],"_npmUser":{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-change-highlight_1.0.4_1569975049370_0.6261741929208777"},"_hasShrinkwrap":false},"1.0.5":{"name":"react-change-highlight","author":{"name":"Medhat Dawoud","email":"medhatdawoud@gmail.com"},"main":"build/index.js","version":"1.0.5","peerDependencies":{"react":"^16.10.1","react-dom":"^16.10.1"},"scripts":{"start":"styleguidist server","test":"echo 'pass'","build":"rollup -c","postbuild":"npm pack && tar -xvzf *.tgz && rm -rf package *.tgz","prepublishOnly":"rm -rf build && npm run build","release":"np"},"devDependencies":{"@babel/core":"^7.6.2","@babel/preset-env":"^7.6.2","@babel/preset-react":"^7.0.0","babel-loader":"^8.0.6","babel-plugin-module-resolver":"^3.2.0","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^2.1.1","np":"5.1.0","react":"^16.10.1","react-dom":"^16.10.1","react-styleguidist":"^9.1.16","rollup":"^1.22.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.3","webpack":"^4.41.0","webpack-cli":"^3.3.9"},"license":"MIT","description":"> React component to highlight changes in the wrapped component to enhance the UX and grap the focus of the user into the changed value of some parts like the cart in an e-commerce application for example.","_id":"react-change-highlight@1.0.5","dist":{"shasum":"d46414596b7dc9f9113289dd26484e572c37f68d","integrity":"sha512-J1rnYjg6jhBp+6MqwF0wustx28EQ78clyKBalLSxVi6YdCHlDwqDfQMkCAWH85/N7V1AKp8R7R0tUac608VegA==","tarball":"https://registry.npmjs.org/react-change-highlight/-/react-change-highlight-1.0.5.tgz","fileCount":6,"unpackedSize":9513,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdk+vlCRA9TVsSAnZWagAAkvcP/juIv38thh3QQBuC5+s1\nANmUK1OGXW1O14f/YHWrOkB5LoqaVrgkVWJdQSZzmSiTCte2GXOhOVZwWO5G\n1e3/NOgJKp0P1+IaA1WZrhQ0lV2SI6tXy7E9bfVqO2u3o+INpoMC4Qpp7ivY\nRlegY9CKydi1e5l89d/m9+LniTns9XhV/jznMIt+v1tfE4Q23QP2/d+jEj8D\niTHw9gbG+cIP/hrpn9vUzKT1uqGR4IDr7WwtCk/7kcYIUA0nNQrtR37L7024\nqv8mdsGCzJjKJBq4tpdk1n+0gYOdEEe5Y6LcLU5aRTkCc6/X78ZnCrNGxN0Q\nKbDxVo9fBoER1b7IzrU+4HkWlCNlGTEl91Yli4LiT+SvtHQq95pcmCQhQdZi\nR2aCPlpysgzG5t6f646JX7dfSBmsuFbnDG1j2Ss05JKL85Jl+U2dCcfWT+hJ\nRRwxgFcD5//8xN1XqJxPpE4ln2W0noQtRttHmq98mKXSlcEew1GkYBQJ8aoo\n/qAvJ24c3ccJDMfgwyXo/2SgaQmfC1ZM8j0MaxSmUXDv0P9CEbWcuhJ0Ctei\nsCSoctjT6ZfDdtsTG1K2gR0DOWxROenHEBW93eAXhAA2tbS8xFZJtREpwiOz\ns7lVBseoRqNOe0hcZG2TeaiCkikxncgjOjp4/OfwP6Sl5lycxdpO2tXA/GnC\nwhyc\r\n=Zp5P\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCcJQNXsnT3Ken3mHyJuRUonLWbCBybjU4q1yPwSATGWwIgeiMsfS1TLWQHPcpavIfJpumlbWs8uCJNpf0wnCq+jpM="}]},"maintainers":[{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"}],"_npmUser":{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-change-highlight_1.0.5_1569975269402_0.8151305962544289"},"_hasShrinkwrap":false},"1.0.6":{"name":"react-change-highlight","author":{"name":"Medhat Dawoud","email":"medhatdawoud@gmail.com"},"main":"build/index.js","version":"1.0.6","peerDependencies":{"react":"^16.10.1","react-dom":"^16.10.1"},"scripts":{"start":"styleguidist server","test":"echo 'pass'","build":"rollup -c","postbuild":"npm pack && tar -xvzf *.tgz && rm -rf package *.tgz","prepublishOnly":"rm -rf build && npm run build","release":"np"},"devDependencies":{"@babel/core":"^7.6.2","@babel/preset-env":"^7.6.2","@babel/preset-react":"^7.0.0","babel-loader":"^8.0.6","babel-plugin-module-resolver":"^3.2.0","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^2.1.1","np":"5.1.0","react":"^16.10.1","react-dom":"^16.10.1","react-styleguidist":"^9.1.16","rollup":"^1.22.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.3","webpack":"^4.41.0","webpack-cli":"^3.3.9"},"license":"MIT","description":"> React component to highlight changes in the wrapped component to enhance the UX and grap the focus of the user into the changed value of some parts like the cart in an e-commerce application for example.","_id":"react-change-highlight@1.0.6","dist":{"shasum":"1fd4e34c3d5e5e9297863f3e7f78a83010270416","integrity":"sha512-anxGry8CPvEuriaakFkk2GgUFcIchxPeJs6WPXGXts7cKS5euFY34XAudI/bVrYD1oDy0wr6PFc7Z7L9lFCzfw==","tarball":"https://registry.npmjs.org/react-change-highlight/-/react-change-highlight-1.0.6.tgz","fileCount":6,"unpackedSize":9649,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdk+7+CRA9TVsSAnZWagAAGVMP/1GrHaP7dYQu6hRTsqxI\nXSa/r9gmEb5UV413TyUIZw79FAw6Ugi9SSyUF77QxZ43PtH/4FM5RH3plbih\nviTHeqaI9viuM+WoNSrWnMxRao96Fl3EE+1b0rEB5Wlm0GsSI8W+AxJOHjuh\nCv/stRHwzh/dvSb920ybsn3S7QFaBhVZHQgLTNMTJ/4bl7dD1GDLL5vIqDnv\ncvvcOlXxJtcBu+mRX1NNDINQr6qz/EAc6xxPaKC13I4eiUuYwrCIO8AazYi6\nBSj31gPf72Wh38U+1yUK88eUVuJxsbGTYBiZJGTgWmc6C+78lZub7sZYi0++\nNVP5TxnkF+VYo5+6U1O9kc5yI0HIDQ5J4f/xzQ3qYKwu9TsJKRkRfoOMYkah\nN9D3zEzXhDuiT/W/wJqq70jSuC0Q/p8l97osZHtopqltKQi+eNVUsUskgLrx\nwsX7KkuEeDeIgwj1F5pzmu8IutgKoZyrJu8Tr+JXvoqv5Gbi+U+Dv2DC52j1\nwDZn7eBas3M+k49Vt22ZhiDU9AypnRH4/3zMSpAEd3g069wjGbq+wgIka24x\n1z5jEx6mBKrqBxUzGkkksV8YOqMCSANC/KDPi0SB3TH2YTVOxGY5xlr16fnf\nrCYl6Q1hMP63NnEH0iPYSjqy/hEOCv/7cJ7W1Kjhz3WFGIhVg4qBW578KxWg\nIy7x\r\n=pe6o\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG2WUf2EtpvNAGg+nlqoQ6p9Iprr0khF9cLtleAhamH5AiBGv5ncLMZrsGF8l90SPIGJdu8LCbYXE0mssv3P/k0n6Q=="}]},"maintainers":[{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"}],"_npmUser":{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-change-highlight_1.0.6_1569976062183_0.8620115242559028"},"_hasShrinkwrap":false},"1.0.7-0":{"name":"react-change-highlight","author":{"name":"Medhat Dawoud","email":"medhatdawoud@gmail.com"},"keywords":["ux","react-highlight","react-change","highlight","change-highlight"],"main":"build/index.js","version":"1.0.7-0","peerDependencies":{"react":"^16.10.1","react-dom":"^16.10.1"},"scripts":{"start":"styleguidist server","test":"echo 'pass'","build":"rollup -c","postbuild":"npm pack && tar -xvzf *.tgz && rm -rf package *.tgz","prepublishOnly":"rm -rf build && npm run build","release":"np"},"devDependencies":{"@babel/core":"^7.6.2","@babel/preset-env":"^7.6.2","@babel/preset-react":"^7.0.0","babel-loader":"^8.0.6","babel-plugin-module-resolver":"^3.2.0","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^2.1.1","np":"5.1.0","react":"^16.10.1","react-dom":"^16.10.1","react-styleguidist":"^9.1.16","rollup":"^1.22.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.3","webpack":"^4.41.0","webpack-cli":"^3.3.9"},"license":"MIT","readmeFilename":"README.md","readme":"# react-change-highlight\n> React component to highlight changes in the wrapped component to enhance the UX and grap the focus of the user into the changed value of some parts like the cart in an e-commerce application for example.\n\nYou can play around with it on this sandbox [codesandbox.io/react-change-highlight](https://codesandbox.io/embed/vigorous-benz-fcwh9)\n\n\n## Install\n```\nyarn add react-change-highlight\n```\nor\n```\nnpm install react-change-highlight\n```\n\n## Usage\nBasically you need to wrap the components you want to highlight on change inside `HighlightChange` element then add `ref` attribute to each child in this component to be used to be highlighted.\n\nIn the following example the `count` variable comes from state, so when ever that function `setCount()` is called with any different value the background of that wrapped div will be changed\n```jsx\nimport ChangeHighlight from 'react-change-highlight';\n\nexport default () => {\n const [count, setCount] = useState(0);\n\n return (\n \n
{count}
\n \n );\n}\n```\n\nDefault styling for highlighting in case the user didn't use a custom styling using the `highlightStyle` property:\n```css\n.react-highlight {\n background-color: #f8ffb4;\n transition: all 0.5s ease-in-out;\n }\n```\n\n## Props\n|Property|Description|Type|Default|\n|--|--|--|--|\n|`showAfter`|number|500|number of milli seconds before start highlighting|\n|`hideAfter`|number|2500|number of milli seconds before ending highlighting|\n|`containerClassName`|string||className for component container|\n|`highlightStyle`|string||className for highlighing content|\n|`disabled`|boolean|false|weather you need to disable highlighting|\n---\n\n## Author\n- Medhat Dawoud\n- Website: [medhatdawoud.net](http://medhatdawoud.net)\n- Twitter: [@med7atdawoud](http://twitter.com/med7atdawoud)","description":"> React component to highlight changes in the wrapped component to enhance the UX and grap the focus of the user into the changed value of some parts like the cart in an e-commerce application for example.","_id":"react-change-highlight@1.0.7-0","dist":{"shasum":"a6329eba1324357baa35096c3baf53603832d9bb","integrity":"sha512-HlHcbEOevCAY33U1jy2UGfyEqT8gvs1lrehnERMYSxziKhRUql0UKZr6J7QqQb+evdv0FiHssz+V6IjIF0z22g==","tarball":"https://registry.npmjs.org/react-change-highlight/-/react-change-highlight-1.0.7-0.tgz","fileCount":6,"unpackedSize":9765,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdk++uCRA9TVsSAnZWagAAiKEP/3jKoostnszV2REOJk5g\nSpI06SN5PdwdC0xtoGeTnAzqkq3lU11vK6BUtClGJs5CZQ8uUA+RNnULUU3a\n3IPUIl5CxDeD+/ycJFe4uFembP+6ydoWccXuEWTWIQaXrlC/IvYtHQgJqyWO\nU4GgfMim8biiYMz2QdAT9Qqtrzcma3FUgGa3UfKxpfcdfglmNuJBouyXeBg8\ngj+RQednMMt5Y2+p7hDk6VpDY3HrajipIetGQafr9MKLZ7rD1TgbYnabd6qE\nNgptwEoi0BgaIhRpajv00sfhMGq9j8/tQ66GSdY0b+kLODyxQC2S12iRPOeO\nRjFqBUeQK7jUSHVNEKN/pj3XsLLsem0sbxBdx+NB7apXbmeNPxgz7ehzIXxh\naQyU/XLcX+4YjoOHLtUlrl9sfsVa1B80fwDa/H5O3QmkgqOFmdEs1v/8Evcd\nDZHmpZ2gdW8X4gAcTvzqlSPRucg6wcvNlYq7Iy4/UnoE9/DrF6ZKPPIvMIZN\n7BNFfHCJZEDg/316Wq3FmXJ5RU49Jz+ClGznjmYcvvTtfQUygoC0F6X1hrNK\nK2jlIhgcj1iT3EKV8iR/b899khCkOwuvirT9gYQM3Am5dqfyKM1I1fx+Ho95\nIEitXRVU6Y2A7O8CDbfaPafH80ONpVTJ3gv7QkL2CxOnx/OpkPkp+9TV6oci\nNKBw\r\n=dHiw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCRtcP62fqg864UWi1fBRvBJ06A5+3RJTF/FbA5hmaINQIgNafONQ5DFnb2EaBLVALCFfgjcHGwgsQyz+qatUgV/qE="}]},"maintainers":[{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"}],"_npmUser":{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-change-highlight_1.0.7-0_1569976238333_0.024944665800418875"},"_hasShrinkwrap":false},"1.0.7-1":{"name":"react-change-highlight","description":"React component to highlight the changed content immediately and bring focus of the user into the changed part","author":{"name":"Medhat Dawoud","email":"medhatdawoud@gmail.com"},"keywords":["ux","react-highlight","react-change","highlight","change-highlight"],"main":"build/index.js","version":"1.0.7-1","peerDependencies":{"react":"^16.10.1","react-dom":"^16.10.1"},"scripts":{"start":"styleguidist server","test":"echo 'pass'","build":"rollup -c","postbuild":"npm pack && tar -xvzf *.tgz && rm -rf package *.tgz","prepublishOnly":"rm -rf build && npm run build","release":"np"},"devDependencies":{"@babel/core":"^7.6.2","@babel/preset-env":"^7.6.2","@babel/preset-react":"^7.0.0","babel-loader":"^8.0.6","babel-plugin-module-resolver":"^3.2.0","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^2.1.1","np":"5.1.0","react":"^16.10.1","react-dom":"^16.10.1","react-styleguidist":"^9.1.16","rollup":"^1.22.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.3","webpack":"^4.41.0","webpack-cli":"^3.3.9"},"license":"MIT","readmeFilename":"README.md","readme":"# react-change-highlight\n> React component to highlight changes in the wrapped component to enhance the UX and grap the focus of the user into the changed value of some parts like the cart in an e-commerce application for example.\n\nYou can play around with it on this sandbox [codesandbox.io/react-change-highlight](https://codesandbox.io/embed/vigorous-benz-fcwh9)\n\n\n## Install\n```\nyarn add react-change-highlight\n```\nor\n```\nnpm install react-change-highlight\n```\n\n## Usage\nBasically you need to wrap the components you want to highlight on change inside `HighlightChange` element then add `ref` attribute to each child in this component to be used to be highlighted.\n\nIn the following example the `count` variable comes from state, so when ever that function `setCount()` is called with any different value the background of that wrapped div will be changed\n```jsx\nimport ChangeHighlight from 'react-change-highlight';\n\nexport default () => {\n const [count, setCount] = useState(0);\n\n return (\n \n
{count}
\n \n );\n}\n```\n\nDefault styling for highlighting in case the user didn't use a custom styling using the `highlightStyle` property:\n```css\n.react-highlight {\n background-color: #f8ffb4;\n transition: all 0.5s ease-in-out;\n }\n```\n\n## Props\n|Property|Description|Type|Default|\n|--|--|--|--|\n|`showAfter`|number|500|number of milli seconds before start highlighting|\n|`hideAfter`|number|2500|number of milli seconds before ending highlighting|\n|`containerClassName`|string||className for component container|\n|`highlightStyle`|string||className for highlighing content|\n|`disabled`|boolean|false|weather you need to disable highlighting|\n---\n\n## Author\n- Medhat Dawoud\n- Website: [medhatdawoud.net](http://medhatdawoud.net)\n- Twitter: [@med7atdawoud](http://twitter.com/med7atdawoud)","_id":"react-change-highlight@1.0.7-1","dist":{"shasum":"bbda9fae36a855aa1769499609d30f40926537ff","integrity":"sha512-nlDBOCxue/GXqcsT0Nnc2pnCqPiuWaPdVfY7L88EgWzGE/d8O01cF4zyodga4j/W6/1b4AE1DbH5CL4KW7VRMA==","tarball":"https://registry.npmjs.org/react-change-highlight/-/react-change-highlight-1.0.7-1.tgz","fileCount":6,"unpackedSize":9896,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdk/DsCRA9TVsSAnZWagAAaXkP/RCKIOZd2glaaGHlNg8m\na+/jVlgwwBFkZYRnpGLCR1T0aEwzQuHmaRZyhoekNoBfhgZGTqy23MMXGv0I\n1vh8AFmNj2ZTJczPWz3GicrcwNw8bG/hwMgKdSjN2rkIQSaeWuoyS4/VBGmx\nFF7Ov3yhxTkKZmdiflg1a2LtzkYFzdwEs71kWys99KkpKRqgKBDe5DnUoydV\n0AHOz7ncTxgVauN222tMz6V/jLU8AUrbAI/392OXYx3ZH2imfZ6mRnCgCC8G\nLWP/qikIUsj3m8pEjGdmFJg0SplFz29P8w/kjpxBs9YrYm6PpVblR0FVcZBJ\nLhcHGlPNSus8nTHCu+ibnsYW9akmPJCoPKGHji7yBBCONUOwb1bcTk9O1o0G\nJsBT54Zh/3pG9NGnGCkk6LUdZ1pDcQZiROFxfirUxnoMo20uTauCUXUhfjj6\nY3tnQqty6hfjvCeJ3HtoQqVlcXiZ7vu9lCLaUWIwEab2wOMlbUvYCxJQPp3v\n6UurqQ34NdqgWhxXzc4ag+9a6w+vpsEOHks5FMfj0lwowdfbTOJokksxfowX\n4mgufxgXrMpQ/mxso+rHIEIZ6YR9+6BMOvVf0+5+n5pCo5QWzesCBzS1pveU\n8H5ONN8UzQ+Ggo3JcsBQZoWjIAhjW4tHGJ8/MSCEKZXtRw2O2IhCtHaBYcBt\nQJL1\r\n=P2wA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFnZoxQ89H/SbvBtxNU90yMJskweQXL0ZIoVzqSXNF8NAiB6ZUtBGFJsM4uGjV3S/X63PePORsW8020mTP+UjDziNQ=="}]},"maintainers":[{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"}],"_npmUser":{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-change-highlight_1.0.7-1_1569976555767_0.9890517207774183"},"_hasShrinkwrap":false},"1.0.7-2":{"name":"react-change-highlight","description":"React component to highlight the changed content immediately and bring focus of the user into the changed part","author":{"name":"Medhat Dawoud","email":"medhatdawoud@gmail.com"},"keywords":["ux","react-highlight","react-change","highlight","change-highlight"],"main":"build/index.js","version":"1.0.7-2","peerDependencies":{"react":"^16.8","react-dom":"^16.8"},"scripts":{"start":"styleguidist server","test":"echo 'pass'","build":"rollup -c","postbuild":"npm pack && tar -xvzf *.tgz && rm -rf package *.tgz","prepublishOnly":"rm -rf build && npm run build","release":"np"},"devDependencies":{"@babel/core":"^7.6.2","@babel/preset-env":"^7.6.2","@babel/preset-react":"^7.0.0","babel-loader":"^8.0.6","babel-plugin-module-resolver":"^3.2.0","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^2.1.1","np":"5.1.0","react":"^16.10.1","react-dom":"^16.10.1","react-styleguidist":"^9.1.16","rollup":"^1.22.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.3","webpack":"^4.41.0","webpack-cli":"^3.3.9"},"license":"MIT","readmeFilename":"README.md","readme":"# react-change-highlight\n> React Change Highlight is a react component to highlight changes in the wrapped component to enhance the UX and grap the focus of the user into the changed value of some parts like the cart in an e-commerce application for example.\n\nThis is a real use case we are using in our company\n![UseCase](https://i.imgur.com/vHxyHrN.gif)\n\nYou can play around with it on this sandbox [codesandbox.io/react-change-highlight](https://codesandbox.io/embed/vigorous-benz-fcwh9)\n\n## Install\n```\nyarn add react-change-highlight\n```\nor\n```\nnpm install react-change-highlight\n```\n\n## Usage\nBasically you need to wrap the components you want to highlight on change inside `HighlightChange` element then add `ref` attribute to each child in this component to be used to be highlighted.\n\nIn the following example the `count` variable comes from state, so when ever that function `setCount()` is called with any different value the background of that wrapped div will be changed\n```jsx\nimport ChangeHighlight from 'react-change-highlight';\n\nexport default () => {\n const [count, setCount] = useState(0);\n\n return (\n \n
{count}
\n \n );\n}\n```\n\nDefault styling for highlighting in case the user didn't use a custom styling using the `highlightStyle` property:\n```css\n.react-highlight {\n background-color: #f8ffb4;\n transition: all 0.5s ease-in-out;\n }\n```\n\n## Props\n|Property|Type|Default|Description|\n|--|--|--|--|\n|`showAfter`|number|500|number of milli seconds before start highlighting|\n|`hideAfter`|number|2500|number of milli seconds before ending highlighting|\n|`containerClassName`|string||className for component container|\n|`highlightStyle`|string||className for highlighing content|\n|`disabled`|boolean|false|weather you need to disable highlighting|\n---\n\n## Author\n- Medhat Dawoud\n- Website: [medhatdawoud.net](http://medhatdawoud.net)\n- Twitter: [@med7atdawoud](http://twitter.com/med7atdawoud)","_id":"react-change-highlight@1.0.7-2","dist":{"shasum":"27a477d6c965b89e0bdc59ae1d44898334ba65c9","integrity":"sha512-9xQM+ztCoL/AgzVpr3qKr/ZpKrzqfzP7fYjSH/eWmCgPVoK/K9oZreXQfHu8lkr3Bl1NhSBXNpNeSBJP+hJ52Q==","tarball":"https://registry.npmjs.org/react-change-highlight/-/react-change-highlight-1.0.7-2.tgz","fileCount":6,"unpackedSize":10014,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdlL3zCRA9TVsSAnZWagAA1dEP/0hTuLOc8oovSb6IHMK4\ndY/KA7gWCzT9RsvVb0+oPMu/C+IqtVPCqOxh62iCV4Czr4iXX4Ke1KGXohMC\nf7RoOXwf9kY8ZETsDQh8JcLbQG3F0j66N/oDx5LKOmRbYSqnY5g0S5wOh98q\nG8tUmgalpWTq+ricResHyTK2fqHRlOVvxL4JEH5GN08E+JDNs1wuMtK5sp2Z\n3H8tzi5ObRA6Uq9aeBsKmmSN1lmQNoAlSnAg4UOyOrnQZIzsaTNDZJZ7BC8w\n5CBUkTUDyMYP9jTnFTmpXiXeKrExRTiGXQbp+6ph0HqfdBi3e7vcXyEtJp4F\nxO9rGZL7OTnwLfQRmEoKCQnuGlexsan8Qg8QrgwIF+XscI1ryi7Br1ic/OIN\n7bFb0peU07uYE132fs6h7F9W7NKvoun4XLJg2cVTC4UHL5NagayLpwToUBlb\nyPRoQQhKDiEK81KRvqSARN+SkRFJx5iQlVmWx6TE2RsGOhGQMCZOGp9lFjj5\nAjQ9g0ne+h+epx1sqDnJ/qF5az/gwnFgZoymsu5p9Y0D1D02GRBZDCexeMJs\nNG3j9y6sbLZvjPqa3ehirbu5MDnlbHCxEsvylv+OPaUICicDpknVKDXokvb3\n4URnVwPu4j9id/HV2KZusUIlacZyXvgCH426jT29etCFxnj1LRQiQQ6mBQTS\nC6o/\r\n=0p/4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEs2dYcvkP7VvK47+JksKv8yA6SztwsDpcYGFNA+dDqDAiA1hzu78gWp9i39yOP0vL7nD7Q2R+Zz8yZsXqlDzXFVdg=="}]},"maintainers":[{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"}],"_npmUser":{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-change-highlight_1.0.7-2_1570029042898_0.22536323161326344"},"_hasShrinkwrap":false},"1.0.7-3":{"name":"react-change-highlight","description":"React component to highlight the changed content immediately and bring focus of the user into the changed part","author":{"name":"Medhat Dawoud","email":"medhatdawoud@gmail.com"},"keywords":["ux","react-highlight","react-change","highlight","change-highlight"],"main":"build/index.js","version":"1.0.7-3","peerDependencies":{"react":"^16.8","react-dom":"^16.8"},"scripts":{"start":"styleguidist server","test":"echo 'pass'","build":"rollup -c","postbuild":"npm pack && tar -xvzf *.tgz && rm -rf package *.tgz","prepublishOnly":"rm -rf build && npm run build","release":"np"},"devDependencies":{"@babel/core":"^7.6.2","@babel/preset-env":"^7.6.2","@babel/preset-react":"^7.0.0","babel-loader":"^8.0.6","babel-plugin-module-resolver":"^3.2.0","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^2.1.1","np":"5.1.0","react":"^16.10.1","react-dom":"^16.10.1","react-styleguidist":"^9.1.16","rollup":"^1.22.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.3","webpack":"^4.41.0","webpack-cli":"^3.3.9"},"license":"MIT","readmeFilename":"README.md","readme":"# react-change-highlight\n> React Change Highlight is a react component to highlight changes in the wrapped component to enhance the UX and grap the focus of the user into the changed value of some parts like the cart in an e-commerce application for example.\n\nThis is a real use case we are using in our company\n![UseCase](https://i.imgur.com/vHxyHrN.gif)\n\nYou can play around with it on this sandbox [codesandbox.io/react-change-highlight](https://codesandbox.io/embed/vigorous-benz-fcwh9)\n\n## Install\n```\nyarn add react-change-highlight\n```\nor\n```\nnpm install react-change-highlight\n```\n\n## Usage\nBasically you need to wrap the components you want to highlight on change inside `HighlightChange` element then add `ref` attribute to each child in this component to be used to be highlighted.\n\nIn the following example the `count` variable comes from state, so when ever that function `setCount()` is called with any different value the background of that wrapped div will be changed\n```jsx\nimport ChangeHighlight from 'react-change-highlight';\n\nexport default () => {\n const [count, setCount] = useState(0);\n\n return (\n \n
{count}
\n \n );\n}\n```\n\nDefault styling for highlighting in case the user didn't use a custom styling using the `highlightStyle` property:\n```css\n.react-highlight {\n background-color: #f8ffb4;\n transition: all 0.5s ease-in-out;\n }\n```\n\n## Props\n|Property|Type|Default|Description|\n|--|--|--|--|\n|`showAfter`|number|500|number of milli seconds before start highlighting|\n|`hideAfter`|number|2500|number of milli seconds before ending highlighting|\n|`containerClassName`|string||className for component container|\n|`highlightStyle`|string||className for highlighing content|\n|`disabled`|boolean|false|weather you need to disable highlighting|\n---\n\n## Author\n- Medhat Dawoud\n- Website: [medhatdawoud.net](http://medhatdawoud.net)\n- Twitter: [@med7atdawoud](http://twitter.com/med7atdawoud)","_id":"react-change-highlight@1.0.7-3","dist":{"shasum":"9eda4bed9a094efe2915f4dea1f0a3ea030b63c3","integrity":"sha512-AXM+wcFhsZw44V+Fxwblmhhq7ZakoJg/stG8+6sEGwdiRma4VW6HHJix/wKT92dSyANGUAyQ8eNLKhxCV4utHg==","tarball":"https://registry.npmjs.org/react-change-highlight/-/react-change-highlight-1.0.7-3.tgz","fileCount":6,"unpackedSize":9875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdlkhTCRA9TVsSAnZWagAAAvYQAJp5ARY9rXbDbmhsLfnu\nn4bSR3sznWuwvscc9Igb0zIPfVPaaEz9UoW0Wmh/uytilXqjJoF5gvdTGbrM\n+vMxLqP89Pr7zfJGK4pedx/SSP3nhSULnh1Yf9tQXpc5sN2s0XSibOWHKMjp\nVmzWS6XolnR45wLRl7nYN/xgk9pXvJ+6ZOnRMGcACTRXjccF01mTK5eaT7OZ\ng0QhzaIHu00w/+iLBs7NDBBRxmVuj0nPQqB2JH/IBMKdanK2kkBcwuUe7npP\nZCUtF0zS43qjRX/ch+kle4Rv1MZH2a4bzE8a9oBghx6ou1kbuOyVReQtobsL\n65x6uR0KJJlTOwgyUU2Ov/nglsTouLETJAGdDCRVMAgduMTM5iLbaSjm0WiA\nz8+RplXGJu1+sEVmeVhfZMTxwwM7mqATgFwmcw9AVym3z/EgsSviDW6zwMsl\n9U/UeU+i0VoMrNUVQFLrKG7/MKrJGfy1Ig7lBDCmI99UPJ/tNdkLpDdiommv\n/LNBkjG6tQMjBi1I+l1Q3TvQSSG+U2oB1Upzr/e+6pH1vFFRVJACxb3A2KYU\n/WMQuGUrFpNzLfxFIObMW01toJgLs6wLHDHH8/wnDVM276MzQ/Z8t3dfnKv/\n2htdZJWGcNfJbM81XKf6Rn3ZG5OaYYBURUmhfMaV8C5wtCPRyUnTiqSbXWtL\nlPVX\r\n=mmGX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEpaiOPON4HQsMqD7EnxZCK2LeEiIy03earTIILvvm4hAiEAkvcGYtl7+ae+XUzQ+eCuWJ13YjFM0Xo3fTBRk8w6YS0="}]},"maintainers":[{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"}],"_npmUser":{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-change-highlight_1.0.7-3_1570130002999_0.483608919357027"},"_hasShrinkwrap":false},"1.0.7-4":{"name":"react-change-highlight","description":"React component to highlight the changed content immediately and bring focus of the user into the changed part","author":{"name":"Medhat Dawoud","email":"medhatdawoud@gmail.com"},"keywords":["ux","react-highlight","react-change","highlight","change-highlight"],"main":"build/index.js","version":"1.0.7-4","peerDependencies":{"react":"^16.8","react-dom":"^16.8"},"scripts":{"start":"styleguidist server","test":"echo 'pass'","build":"rollup -c","postbuild":"npm pack && tar -xvzf *.tgz && rm -rf package *.tgz","prepublishOnly":"rm -rf build && npm run build","release":"np"},"devDependencies":{"@babel/core":"^7.6.2","@babel/preset-env":"^7.6.2","@babel/preset-react":"^7.0.0","babel-loader":"^8.0.6","babel-plugin-module-resolver":"^3.2.0","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^2.1.1","np":"5.1.0","react":"^16.10.1","react-dom":"^16.10.1","react-styleguidist":"^9.1.16","rollup":"^1.22.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.3","webpack":"^4.41.0","webpack-cli":"^3.3.9"},"license":"MIT","readmeFilename":"README.md","readme":"# react-change-highlight\n> React Change Highlight is a react component to highlight changes in the wrapped component to enhance the UX and grap the focus of the user into the changed value of some parts like the cart in an e-commerce application for example.\n\nThis is a real use case we are using in our company\n![UseCase](https://i.imgur.com/vHxyHrN.gif)\n\nYou can play around with it on this sandbox [codesandbox.io/react-change-highlight](https://codesandbox.io/embed/vigorous-benz-fcwh9)\n\n## Install\n```\nyarn add react-change-highlight\n```\nor\n```\nnpm install react-change-highlight\n```\n\n## Usage\nBasically you need to wrap the components you want to highlight on change inside `HighlightChange` element then add `ref` attribute to each child in this component to be used to be highlighted.\n\nIn the following example the `count` variable comes from state, so when ever that function `setCount()` is called with any different value the background of that wrapped div will be changed\n```jsx\nimport ChangeHighlight from 'react-change-highlight';\n\nexport default () => {\n const [count, setCount] = useState(0);\n\n return (\n \n
{count}
\n \n );\n}\n```\n\nDefault styling for highlighting in case the user didn't use a custom styling using the `highlightStyle` property:\n```css\n.react-highlight {\n background-color: #f8ffb4;\n transition: all 0.5s ease-in-out;\n }\n```\n\n## Props\n|Property|Type|Default|Description|\n|--|--|--|--|\n|`showAfter`|number|500|number of milli seconds before start highlighting|\n|`hideAfter`|number|2500|number of milli seconds before ending highlighting|\n|`containerClassName`|string||className for component container|\n|`highlightStyle`|string||className for highlighing content|\n|`disabled`|boolean|false|weather you need to disable highlighting|\n---\n\n## Author\n- Medhat Dawoud\n- Website: [medhatdawoud.net](http://medhatdawoud.net)\n- Twitter: [@med7atdawoud](http://twitter.com/med7atdawoud)","_id":"react-change-highlight@1.0.7-4","dist":{"shasum":"a1184612a545ca7009d797eb450a670762d19ff8","integrity":"sha512-lepnABLLA8DHORllckSixWr5dY9RQbZ1RlXL9qTjAnHwLUIjOVA6QUQPIclDyJ2P/XCLHKd5WJrdvE7gO63fOA==","tarball":"https://registry.npmjs.org/react-change-highlight/-/react-change-highlight-1.0.7-4.tgz","fileCount":6,"unpackedSize":9913,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdlkqeCRA9TVsSAnZWagAAEBQP/1Sdzc33Hf4aGClF+37o\nRb/SKKkJ1FU2JYBja+d8gJ+lijfUQe2KWdukwuxgaMS8ocw1tR6Y5qwPjBJ/\nra+W4FT6mn+ak1GndZtc0PAVuhZhi0nzWfEZJJRUujg1aYTU5HyTzt4zSEf/\naLuOIINjHCakU3WQ1E7DhCqCdHfEtloHa2IT+fJOokTycEFyLoTdxCyLivJb\nt3yh5+nIA3bMtssBk2rQfo3LE9ODRV8xHLBpaiBjUHl3JIMLE9UyOjyCurs1\nhLcNq7+eWG8qytE1IAo0Qsd4wSggn/4wF+DzWRTzRfXyKesXmK0aEps5BRdE\ncYKQmDaSpCtCmdy2sQUuLS70X5jt4scRmauNKta//bFeRZ3Bwxx5fMxoW710\ndZjPCgcQo8nKY+1BhaWbYfeEqr3fCnEARwt2U6DQvnXejy/nJaPFudw4dfi7\ni9NDjBvIX9xa28YYO3YR0efoaIBTt9SViwWSRcNKQ1t70yC42mzn8JQQAPdg\n9As150aL6kZUGEefn0JvGmOHnc/kuhxLfcy04wnXDCWWERjrXWDjJNQWpvbU\ntnyqkBLuSbgcGM/CSzKaJbOHCCxm1SpgSaJ8FwPd27zaXnfjO6T45AspgNFT\nHQay1Hr1fEyTqTEYtHi20pVZ32FdB5otJwglWpRlZ55TBbZYnPSUa0h/3fZp\nHU3c\r\n=hh9r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHdPOImMgLyCObzRZZGwY6UdroYg4qKCtLjnkP4ncgaMAiEAoYg9kwPgF4Qzm+gB/plCGBrzDAy5E3Z2cgfWMYPJJgE="}]},"maintainers":[{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"}],"_npmUser":{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-change-highlight_1.0.7-4_1570130589587_0.12854403325222452"},"_hasShrinkwrap":false},"1.1.0":{"name":"react-change-highlight","description":"React component to highlight the changed content immediately and bring focus of the user into the changed part","author":{"name":"Medhat Dawoud","email":"medhatdawoud@gmail.com"},"keywords":["ux","react-highlight","react-change","highlight","change-highlight"],"main":"build/index.js","version":"1.1.0","peerDependencies":{"react":"^16.8","react-dom":"^16.8"},"scripts":{"start":"styleguidist server","test":"echo 'pass'","build":"rollup -c","postbuild":"npm pack && tar -xvzf *.tgz && rm -rf package *.tgz","prepublishOnly":"rm -rf build && npm run build","release":"np"},"devDependencies":{"@babel/core":"^7.6.2","@babel/preset-env":"^7.6.2","@babel/preset-react":"^7.0.0","babel-loader":"^8.0.6","babel-plugin-module-resolver":"^3.2.0","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^2.1.1","np":"5.1.0","react":"^16.10.1","react-dom":"^16.10.1","react-styleguidist":"^9.1.16","rollup":"^1.22.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.3","webpack":"^4.41.0","webpack-cli":"^3.3.9"},"license":"MIT","_id":"react-change-highlight@1.1.0","dist":{"shasum":"e2114ae4f2a53a70d70f9f60aab9fbed80c294fb","integrity":"sha512-VfsbzI80CB2bFJ8IYnVbRbJldZilm8fjaoN36VPsQIu0aRLafacx0qSc/GN4QCiWgxVNxVCu/g7bmeisRIA5CQ==","tarball":"https://registry.npmjs.org/react-change-highlight/-/react-change-highlight-1.1.0.tgz","fileCount":6,"unpackedSize":9386,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdlmANCRA9TVsSAnZWagAACjUP/A69BpBpcWFWTke1Q30T\nkeK+vMQoaJkN3HejoOmdGR4kkuDLtKFyy5BWQaugMbwnY3q9qPGmbt5yj68q\nfcP/c7G6uB2ZDtndyJ+58pttRVOwkeS5lKjh9hCoQiCdpnrCaji7tj7KFQ4R\nZ7tY6RoojGmPqb8gTayy4zSNG5/9H5ib51+MlvGEZqeSDf/EZq31HUHDIcpW\nHQXbpbASE327up/cvTgwEzeAlI6o1lUevau8IF78GWcIVhYLD0hkjiroVRIp\ntvOmGd2LvQqRrxlxcgSKM/2B+BasMgnDPLcA5tAGIgMyTkK32BDvzl9b1yRc\nOMeNe281mtvH6uvCwdtpEayAF02mE8lskRKdwVjtHJ5/E6kypYRXJkk6VgdF\n/fK3MZdqLxrnt0AjESpvEA9fSUKo/AeLwaiOA3M+F44G6vwzuEh9aIFD67M9\nFvSuHPEXv1aTQpP8MYdrmMCHoQx+T9ZYh4nLQSv0+7TiuSwjcKIFiXGEtsNE\nUXbBEfbM68M0xVrKKIYMW++dxJlpcHq/ZJgdktBRObo1/Kh89tE6zOvobcc2\n+ZGPsJdUXIwGGw1TS5Ylm1w5aQdG6atwdQrS90GbBxmhnrmCpu4WWVs31gRO\n57uFv00MYhR6oXWkalBhZeK2Qq902cWADCmcbSzvl0FTuDhIqQAP0s3JAXl0\nD2S6\r\n=GMce\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGlfa8qCvW5Dwb5+LizK8CEF/TnL7KUws3p5eA93IzHsAiB9Q6L+6Pmp5icHbd1UT4vgBdPVaK9JrfYRL0J1+zXoTw=="}]},"maintainers":[{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"}],"_npmUser":{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-change-highlight_1.1.0_1570136076966_0.21716334695156458"},"_hasShrinkwrap":false},"1.1.1":{"name":"react-change-highlight","description":"React component to highlight the changed content immediately and bring focus of the user into the changed part","author":{"name":"Medhat Dawoud","email":"medhatdawoud@gmail.com"},"keywords":["ux","react-highlight","react-change","highlight","change-highlight"],"main":"build/index.js","version":"1.1.1","peerDependencies":{"react":"^16.8","react-dom":"^16.8"},"scripts":{"start":"styleguidist server","test":"echo 'pass'","build":"rollup -c","postbuild":"npm pack && tar -xvzf *.tgz && rm -rf package *.tgz","prepublishOnly":"rm -rf build && npm run build","release":"np"},"devDependencies":{"@babel/core":"^7.6.2","@babel/preset-env":"^7.6.2","@babel/preset-react":"^7.0.0","babel-loader":"^8.0.6","babel-plugin-module-resolver":"^3.2.0","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^2.1.1","np":"5.1.0","react":"^16.10.1","react-dom":"^16.10.1","react-styleguidist":"^9.1.16","rollup":"^1.22.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.3","webpack":"^4.41.0","webpack-cli":"^3.3.9"},"license":"MIT","_id":"react-change-highlight@1.1.1","dist":{"shasum":"bf877805c58af58e777e8faac77d047c5a8512f3","integrity":"sha512-1EyQS97QVOWNk1x5Q6jbt6VtisI1bgwLP2V66IoHBJ7oBGxkJvtnXVWgNrUQvZbrYUerIDuCacUuQvWC/cdgZQ==","tarball":"https://registry.npmjs.org/react-change-highlight/-/react-change-highlight-1.1.1.tgz","fileCount":6,"unpackedSize":9829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdlnm/CRA9TVsSAnZWagAAh68P/i8pZg0oAHmtFQAKn6v6\nen/6vbzSZOuC4Q3LpqdDnIAZciu+ENpo6EgILElq/5ANBy/pDz3IY0hAbPBF\n7D7KDguIb/TKJ+7Lsh1VRQ5kM/Le9BzPDUPbJciMAKRblZebef2YAhpbXEk2\nnBsSVkZ2wqLC54wG0X5mVsAWhn9oUzVWiWMLZmFaF4EhoOJ+HcEf/H5+hZgF\n5WYsNbN6pktbDnYXy5dMMyKHun5zF+sCY51wajCzYoN91NIrRLdC+OYEyHGy\nSiFfR4ooaMI81ELtEcGcEQYohhD9pOpjr4M9f94LMSJy2bYNwjOnbp3wnwUS\nghMPn+4tbXjamYzTIHahXV7pRIGaU5K2UidDh160urW+skWrAkktZIZSXluX\ndchHvrv1QJjJ+SrmgoqwAODnav16oZq/gRCPiwKLJT2Sdu6Dx6iH7A0XU+JC\n5qv8ur6jyy//o5O2sM3lgUjU5Hp36HWJH/VJBEwARsZms/cBaV9GKUUclj1j\njmb3ITVZWYJ29k1lzcx+LI3Qai59Zl8Vj8jrwkl6oc85g6G3Y4JXzzQJCh0P\n5Wg4h1+G7shhzLGlEflvdBvWCrWOvpd3hf8kYDGbNG76tSMFxrnT0+PIfMdd\nxaryt0+/8BU9HgkBqIQ9IimE8GtTjDbe6AA8adylzk+TLDZff0l1xa5WwYxY\n2e0x\r\n=FrSW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEr5uxod9AUQF9050a8l+KzFFaAIX04xR2xguW8Ey674AiA9p6lizAGga/rVnsXRDPbSEV6P2kqAqLDp2+NIozcteQ=="}]},"maintainers":[{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"}],"_npmUser":{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-change-highlight_1.1.1_1570142654978_0.2580866562693085"},"_hasShrinkwrap":false},"1.1.2":{"name":"react-change-highlight","description":"React component to highlight the changed content immediately and bring focus of the user into the changed part","author":{"name":"Medhat Dawoud","email":"medhatdawoud@gmail.com"},"keywords":["ux","react-highlight","react-change","highlight","change-highlight"],"main":"build/index.js","version":"1.1.2","peerDependencies":{"react":"^16.8","react-dom":"^16.8"},"scripts":{"start":"styleguidist server","test":"echo 'pass'","build":"rollup -c","postbuild":"npm pack && tar -xvzf *.tgz && rm -rf package *.tgz","prepublishOnly":"rm -rf build && npm run build","release":"np"},"devDependencies":{"@babel/core":"^7.6.2","@babel/preset-env":"^7.6.2","@babel/preset-react":"^7.0.0","babel-loader":"^8.0.6","babel-plugin-module-resolver":"^3.2.0","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^2.1.1","np":"5.1.0","react":"^16.10.1","react-dom":"^16.10.1","react-styleguidist":"^9.1.16","rollup":"^1.22.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.3","webpack":"^4.41.0","webpack-cli":"^3.3.9"},"license":"MIT","_id":"react-change-highlight@1.1.2","dist":{"shasum":"8897ba950a78b19d39cef591b8c19512cdd30fc0","integrity":"sha512-7VIFLD9u0FZ7M7ziOkCwuV6tqT6M5ziFuTesSD5/8JYGdvQ2+O+tgxTkbS4bPiM8pQcJZlo9VGC0uyuwieMWWw==","tarball":"https://registry.npmjs.org/react-change-highlight/-/react-change-highlight-1.1.2.tgz","fileCount":6,"unpackedSize":10796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdln7qCRA9TVsSAnZWagAA/cAP/3FV98Bty5WPE1Lqog2o\nGCAZ3t+i7/V0kBAYL1WhAjPqpfK7LGmV4Ar5sJNNOOJzp7AM42yF55p29ffb\nq9dydeX8+2WNnuwX7GMxiVV2G0H8luz2mJkgqsjwh1e0g3GyB5ECESItDnQV\nGkCHiXtBcARMCRNID4+b8BnbjYzJltx6bPRWY23AEmkwd7VgRTMcg3Cx3Jsn\nGMQhMFzpaW4TkJ2P78Oo6Ww7BjdrSLsLqLstHB2JdfK5PeNvQIBY3uEsyVyM\nZoq2NnuNzEuOnnXZ0bfwUK+bDwFBoOw9mI82cma4HzJXVQ6HNF2EkqoLbuTa\nWG/ltTR4jHtXa6XR/Njq3HAzMmVVU/qrDRM8eDu6Nwgd3IjJkpv3TR+1ZFrv\nXlejLRHQ4Lt1MmFMxDaoDxFNraZbZv1/dJHfbp7LxhC5aKFhcO/zspcGxs8u\nX+JTV1Vks9LzgOdrVAnrCa3w3bjGzvfp8cFQjOczPKSeonnobzWWhp+VaBd8\nje2U56SKuUyXe4XmbN1NaIbKXJIsOYYyGTuZoeVSgZGIAa7ZUGFjJaFq3gM8\n94mQaXNORX57hNRfS3TYCJLtq7/AmpqvXFzUUfm817B/k5MvKbaObr0/nIQ1\ndRn9DOcztAxjLTy0lfGU58NOV5iWwtiHXY5zrM3nB7qEaakN+ApJ8foeNS9m\n7w/w\r\n=FO3J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGRA4qpsz4QfCyhPah9YWOAc18FO2woXu23lSwTPEeXJAiBjny4HnMyVEn7A6QEp2iJ6AMb/tsADl8Tr27xhaHPi5Q=="}]},"maintainers":[{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"}],"_npmUser":{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-change-highlight_1.1.2_1570143977440_0.5506017344702978"},"_hasShrinkwrap":false},"1.1.3-0":{"name":"react-change-highlight","description":"React component to highlight the changed content immediately and bring focus of the user into the changed part","author":{"name":"Medhat Dawoud","email":"medhatdawoud@gmail.com"},"keywords":["ux","react-highlight","react-change","highlight","change-highlight"],"main":"build/index.js","version":"1.1.3-0","peerDependencies":{"react":"^16.8","react-dom":"^16.8"},"scripts":{"start":"styleguidist server","test":"echo 'pass'","build":"rollup -c","postbuild":"npm pack && tar -xvzf *.tgz && rm -rf package *.tgz","prepublishOnly":"rm -rf build && npm run build","release":"np"},"devDependencies":{"@babel/core":"^7.6.2","@babel/preset-env":"^7.6.2","@babel/preset-react":"^7.0.0","babel-loader":"^8.0.6","babel-plugin-module-resolver":"^3.2.0","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^2.1.1","np":"5.1.0","react":"^16.10.1","react-dom":"^16.10.1","react-styleguidist":"^9.1.16","rollup":"^1.22.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.3","webpack":"^4.41.0","webpack-cli":"^3.3.9"},"license":"MIT","readmeFilename":"README.md","readme":"# react-change-highlight\n> React Change Highlight is a react component to highlight changes in the wrapped component to enhance the UX and grap the focus of the user into the changed value of some parts like the cart in an e-commerce application for example.\n\nThis is a real use case we are using in our company\n![UseCase](https://i.imgur.com/vHxyHrN.gif)\n\nYou can play around with it on this sandbox [codesandbox.io/react-change-highlight](https://codesandbox.io/embed/vigorous-benz-fcwh9)\n\n## Install\n```\nyarn add react-change-highlight\n```\nor\n```\nnpm install react-change-highlight\n```\n\n## Usage\nBasically you need to wrap the components you want to highlight on change inside `HighlightChange` element then add `ref` attribute to each child in this component to be used to be highlighted.\n\nIn the following example the `count` variable comes from state, so when ever that function `setCount()` is called with any different value the background of that wrapped div will be changed\n```jsx\nimport ChangeHighlight from 'react-change-highlight';\n\nexport default () => {\n const [count, setCount] = useState(0);\n\n return (\n \n
{count}
\n \n );\n}\n```\n\nDefault styling for highlighting in case the user didn't use a custom styling using the `highlightStyle` property:\n```css\n.react-highlight {\n background-color: #f8ffb4;\n transition: all 0.5s ease-in-out;\n }\n```\n\n## Props\n|Property|Type|Default|Description|\n|--|--|--|--|\n|`showAfter`|number|500|number of milli seconds before start highlighting|\n|`hideAfter`|number|2500|number of milli seconds before ending highlighting|\n|`containerClassName`|string||className for component container|\n|`highlightStyle`|string||className for highlighing content|\n|`disabled`|boolean|false|weather you need to disable highlighting|\n---\n\n## Author\n- Medhat Dawoud\n- Website: [medhatdawoud.net](http://medhatdawoud.net)\n- Twitter: [@med7atdawoud](http://twitter.com/med7atdawoud)","_id":"react-change-highlight@1.1.3-0","dist":{"shasum":"b7102c70b6fcbe9aeb7419c7775bc5ce3e51b735","integrity":"sha512-WQTKEdcKsYlSJC2+s+ZctdrfqAcWgEql0qO/xwt5TCGB1aGqPwmXZ4mKcYXBxXqksBsh00Xef6mlFaKErFYrtQ==","tarball":"https://registry.npmjs.org/react-change-highlight/-/react-change-highlight-1.1.3-0.tgz","fileCount":6,"unpackedSize":10783,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdloDoCRA9TVsSAnZWagAAkkcQAIBbYrRxklqj89+gbbN1\n7iIsRlD3Xcvlg6ett8NyRKFQ2mJlapVfH3WaGvE2yB2FlF9a9I6QA7TKizVu\nagrOQjLHZys23pVz68Gh8uUzrp7NX0sVxz5aQ+QjIBqTbYR4oWtl9f/wPRhV\ne3CHXZqkdTzZXXoqYrkqzs4XUgv1UhKGIFQt1O7Ju/Cn54/wzB9/zunzkm4V\n6m8FVuLlIAnxznrNxT76JqmBU0wndS4cZxXil72Z2y04g5MpkKFY1wom8zOq\nI++/PKsBjGtTFrRL1dV2qYTgRFvfokw4HB1PzmLEbpfsBTr+imalkHFhhvdv\nGh09U1wMVmRcugaVz/iijP6+dsAq9RLQcq2EJudEE7L/SiJDqeynYcuP5VlR\nPH4yNjKhZlCV0lfNUv06IxpL68ng+iMaH0VwxtkusqnSj35YOZRkB4ALqYEf\n/4QP4g46QSr9bNvNopVDvUZ3ynr6gb7K+KgZTsfonOK/ePu69amMBuStJaVi\nLLO6fgAAhB2YSWjh8IZNsanu7dYqQ0XEQOnpfvfWr5qIfJNXqgI/yZGAlqZX\n22Iz2PZg0vHUpuhtNoTBCuP6sDttdSUOtaUNyhZhDnsFVNQ0QacMcWKZ2HMX\nimjMdKXSF4ngZvXRZB4/HSn+OBeHQ7IsVmHOWJT2XQIoyD2YtrmAS71T8wXV\nJhVX\r\n=qMQn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICFvsejuqkrQQk2OYoGgSW22UTv0irpg77PdciWxZsFCAiEAjxUfirRwZ0X7zmu/ZzRJnnS1s+1Mk7s2FX2XKBqk6Sg="}]},"maintainers":[{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"}],"_npmUser":{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-change-highlight_1.1.3-0_1570144487478_0.32431836647356915"},"_hasShrinkwrap":false},"1.1.3-1":{"name":"react-change-highlight","description":"React component to highlight the changed content immediately and bring focus of the user into the changed part","author":{"name":"Medhat Dawoud","email":"medhatdawoud@gmail.com"},"keywords":["ux","react-highlight","react-change","highlight","change-highlight"],"main":"build/index.js","version":"1.1.3-1","peerDependencies":{"react":"^16.8","react-dom":"^16.8"},"scripts":{"start":"yarn build","test":"echo 'pass'","build":"rollup -c","postbuild":"npm pack && tar -xvzf *.tgz && rm -rf package *.tgz","prepublishOnly":"rm -rf build && npm run build","release":"np"},"devDependencies":{"@babel/core":"^7.6.2","@babel/preset-env":"^7.6.2","@babel/preset-react":"^7.0.0","babel-loader":"^8.0.6","babel-plugin-module-resolver":"^3.2.0","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^2.1.1","np":"5.1.0","react":"^16.10.1","react-dom":"^16.10.1","react-styleguidist":"^9.1.16","rollup":"^1.22.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.3","webpack":"^4.41.0","webpack-cli":"^3.3.9"},"license":"MIT","readmeFilename":"README.md","readme":"# react-change-highlight\n[![NPM](https://nodei.co/npm/react-change-highlight.png)](https://nodei.co/npm/react-change-highlight/)\n> React Change Highlight is a react component to highlight changes in the wrapped component to enhance the UX and grap the focus of the user into the changed value of some parts like the cart in an e-commerce application for example.\n\nThis is a real use case we are using in our company\n![UseCase](https://i.imgur.com/vHxyHrN.gif)\n\nYou can play around with it on this sandbox [codesandbox.io/react-change-highlight](https://codesandbox.io/s/react-change-highlight-example-fcwh9)\n\n## Install\n```\nyarn add react-change-highlight\n```\nor\n```\nnpm install react-change-highlight\n```\n\n## Usage\nBasically you need to wrap the components you want to highlight on change inside `HighlightChange` element then add `ref` attribute to each child in this component to be used to be highlighted.\n\nIn the following example the `count` variable comes from state, so when ever that function `setCount()` is called with any different value the background of that wrapped div will be changed\n```jsx\nimport ChangeHighlight from 'react-change-highlight';\n\nexport default () => {\n const [count, setCount] = useState(0);\n\n return (\n \n
{count}
\n \n );\n}\n```\n\nDefault styling for highlighting in case the user didn't use a custom styling using the `highlightStyle` property:\n```css\n.react-highlight {\n background-color: #f8ffb4;\n transition: all 0.5s ease-in-out;\n }\n```\n\n## Props\n|Property|Type|Default|Description|\n|--|--|--|--|\n|`showAfter`|number|500|number of milli seconds before start highlighting|\n|`hideAfter`|number|2500|number of milli seconds before ending highlighting|\n|`containerClassName`|string||className for component container|\n|`highlightStyle`|string||className for highlighing content|\n|`disabled`|boolean|false|weather you need to disable highlighting|\n---\n\n## Author\n- Medhat Dawoud\n- Website: [medhatdawoud.net](http://medhatdawoud.net)\n- Twitter: [@med7atdawoud](http://twitter.com/med7atdawoud)","_id":"react-change-highlight@1.1.3-1","dist":{"shasum":"250fcd9e66bad96a2dee89d500cace2028ff8469","integrity":"sha512-durgX4/N1yp3m+PfcH7q7PIstbDpfrzfiknsrvz6LqAYFaQcd0Q9ZXWYmSRNtRfJ40mKmNeWDfKNHOvtnWoqow==","tarball":"https://registry.npmjs.org/react-change-highlight/-/react-change-highlight-1.1.3-1.tgz","fileCount":6,"unpackedSize":12769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdsMPICRA9TVsSAnZWagAAQigP/0/l2n7CknX7Q18hMCpH\nZYqf1/2DZuMi6d/pK5Ow1QrHx0GwB/ax03BYmPRTVADvsNb1zG300r2WQxdY\ncUZBScWqJ4Gm9EBApz5Wdx+/EA3aY1/O+59WvnPPfyWyc7ec/kk/txI0IaQC\n0C/lSqkkQXS/mOYLnLk4LXLu/AW4j26WD6g3vv72EhU7XP4UHkqZUpBJRLTk\noHBxPAV4xT7zxSwxJtP1WR17GB+TOy93goR2wZorlRICJ0aA2adJPIvARTi+\nqq171eJm/FGzh/q8dHRO0XC+uuzsKku9gI7sGFNp3gz4A5bmdr8IK4vHFStX\ncrm+YlMh3K2B3Su2g6/FIPLyvD9Sw0IYw4iZ2Ljwf9cSuMNtlKzE1mlmYeRm\nXsiG02Sp3EmN8cMOL06pyiygS2obx61pmlMCqb9fzu/jMBYQD/umgidBQQXc\n5pXgGmYV+X2xt9xc3/tTj6fdZLxwM7lPS07aDasRaaoNOtEh94yZ/pqJxnAD\nO38bQpXpcyUEaCn1fkQJiwILHlNQMSdr1EXoafT9M887jVX9Wfcqt4PWgdkP\ndREANhzbhROWF7vebaR0hac9wRUon76FLiKu4qpU+DvlHgQ9B3+ONpurjp16\nffqusWA9nsn2pxCLH+R3in6MyDylKyvKsxvq89voU+O697agvPuPiXyK93//\nkMRz\r\n=kbkU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA3OBMVAT0OVsjZssQ4fhfgX8Ffghk1sEVsKapiR93s5AiEA3oYVPMtk+GeNQ9qoKZ6LhZDPr5rb0Be289TPtjVkVD4="}]},"maintainers":[{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"}],"_npmUser":{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-change-highlight_1.1.3-1_1571865544002_0.8596285249939934"},"_hasShrinkwrap":false},"1.1.3-2":{"name":"react-change-highlight","description":"React component to highlight the changed content immediately and bring focus of the user into the changed part","author":{"name":"Medhat Dawoud","email":"medhatdawoud@gmail.com"},"keywords":["ux","react-highlight","react-change","highlight","change-highlight"],"main":"build/index.js","version":"1.1.3-2","peerDependencies":{"react":"^16.8","react-dom":"^16.8"},"scripts":{"start":"yarn build","test":"echo 'pass'","build":"rollup -c","postbuild":"npm pack && tar -xvzf *.tgz && rm -rf package *.tgz","prepublishOnly":"rm -rf build && npm run build","release":"np"},"devDependencies":{"@babel/core":"^7.6.2","@babel/preset-env":"^7.6.2","@babel/preset-react":"^7.0.0","babel-loader":"^8.0.6","babel-plugin-module-resolver":"^3.2.0","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^2.1.1","np":"5.1.0","react":"^16.10.1","react-dom":"^16.10.1","react-styleguidist":"^9.1.16","rollup":"^1.22.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-typescript2":"^0.24.3","rollup-plugin-uglify":"^6.0.3","typescript":"^3.6.4","webpack":"^4.41.0","webpack-cli":"^3.3.9"},"license":"MIT","readmeFilename":"README.md","readme":"# react-change-highlight\n[![NPM](https://nodei.co/npm/react-change-highlight.png)](https://nodei.co/npm/react-change-highlight/)\n> React Change Highlight is a react component to highlight changes in the wrapped component to enhance the UX and grap the focus of the user into the changed value of some parts like the cart in an e-commerce application for example.\n\nThis is a real use case we are using in our company\n![UseCase](https://i.imgur.com/vHxyHrN.gif)\n\nYou can play around with it on this sandbox [codesandbox.io/react-change-highlight](https://codesandbox.io/s/react-change-highlight-example-fcwh9)\n\n## Install\n```\nyarn add react-change-highlight\n```\nor\n```\nnpm install react-change-highlight\n```\n\n## Usage\nBasically you need to wrap the components you want to highlight on change inside `HighlightChange` element then add `ref` attribute to each child in this component to be used to be highlighted.\n\nIn the following example the `count` variable comes from state, so when ever that function `setCount()` is called with any different value the background of that wrapped div will be changed\n```jsx\nimport ChangeHighlight from 'react-change-highlight';\n\nexport default () => {\n const [count, setCount] = useState(0);\n\n return (\n \n
{count}
\n \n );\n}\n```\n\nDefault styling for highlighting in case the user didn't use a custom styling using the `highlightStyle` property:\n```css\n.react-highlight {\n background-color: #f8ffb4;\n transition: all 0.5s ease-in-out;\n }\n```\n\n## Props\n|Property|Type|Default|Description|\n|--|--|--|--|\n|`showAfter`|number|500|number of milli seconds before start highlighting|\n|`hideAfter`|number|2500|number of milli seconds before ending highlighting|\n|`containerClassName`|string||className for component container|\n|`highlightStyle`|string||className for highlighing content|\n|`disabled`|boolean|false|weather you need to disable highlighting|\n---\n\n## Author\n- Medhat Dawoud\n- Website: [medhatdawoud.net](http://medhatdawoud.net)\n- Twitter: [@med7atdawoud](http://twitter.com/med7atdawoud)","_id":"react-change-highlight@1.1.3-2","dist":{"shasum":"2c28d63a922f452ff396f44f73639de3a84f7676","integrity":"sha512-6Vt7L1kFyb5CCyzt9Nu26pw02Y7JhMpbtEoWYxujKE2p5qEeBvTTajuIv0xJ24+lEP4LQNdfhdi1cjCTU4Wgwg==","tarball":"https://registry.npmjs.org/react-change-highlight/-/react-change-highlight-1.1.3-2.tgz","fileCount":10,"unpackedSize":11681,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdwLVaCRA9TVsSAnZWagAAuqsP/1Zmd6BVK0vuWcu0wpxz\nL/t3aJA8riH9I6cS16IU9/rQy2tQg4imQIOkn0/bnkNzZ/RTiaTJ7o8EhawR\nqlz9avmMSh+X6Sn0yF3kqkbFQ6ijyU81UFNKdVI2GMhR0ZGOUK1J1L3dnvhU\n7xue8r2xosSw/CGTgeWpzGO4F6E89XT0FV1nytBQKbOsivLHVL3EH4hArxk3\nN/qHVrEKWZpYOljjv0UJ6e7w6HaHAlruWYZU8X6LP1nUxu+cdnPMYQ7WXkm3\n09xQkGsIK5o/GqoVI1CmK1mlRCuvqTIOgMRFzlm4h8SG7trkC9RtPuVhyo4X\nz/rZ70IuH2z+L9g6+J37ronHDkWNmIJo68YZ9euSyugzEeOWBShwqJ72NW3U\ngy7Kz9J6yyhy79AKkS+MMvyKSD3fdCHrljm94jZd327x4VyR9qVe5c/UIR7H\n+xd84LcALdO93YX0YjR5XwhZDOwHx/7CgaPFwdMCI00+SYJe8ad3ot3Upx1I\n6XcHhKsNWrXO2cxSTGojRZvIw9KA3sRbRvrLc2+MqoaEJ/7LQUYw4hPph2Vi\nxpG2ietmbasCfLFK4WeR0liQJ1C6vGos3v7hS8GWzJ4W7iJlgvatNspyTHSS\nmB+BFbbiRcPc6csAb3RB9CCbDcH8lbQu0T7Dopfs4n/KCFwSRLjUY/5Q6pZ1\n7x3b\r\n=gSF4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC1QLJPZAovY8THG2V6AcHRRrMNdNYg+U6NQg5zPw6xQAIhAKR5U9XXQ+3v1H511qZACRNuoYtlR2oTJ+jEVdVjpoT0"}]},"maintainers":[{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"}],"_npmUser":{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-change-highlight_1.1.3-2_1572910425827_0.4870602934767141"},"_hasShrinkwrap":false},"1.1.3":{"name":"react-change-highlight","description":"React component to highlight the changed content immediately and bring focus of the user into the changed part","author":{"name":"Medhat Dawoud","email":"medhatdawoud@gmail.com"},"keywords":["ux","react-highlight","react-change","highlight","change-highlight"],"main":"build/index.js","version":"1.1.3","peerDependencies":{"react":"^16.8","react-dom":"^16.8"},"scripts":{"start":"yarn build","test":"echo 'pass'","build":"rollup -c","postbuild":"npm pack && tar -xvzf *.tgz && rm -rf package *.tgz","prepublishOnly":"rm -rf build && npm run build","release":"np"},"devDependencies":{"@babel/core":"^7.6.2","@babel/preset-env":"^7.6.2","@babel/preset-react":"^7.0.0","@types/react":"^16.9.11","@types/react-dom":"^16.9.3","babel-loader":"^8.0.6","babel-plugin-module-resolver":"^3.2.0","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^2.1.1","np":"5.1.0","react":"^16.10.1","react-dom":"^16.10.1","react-styleguidist":"^9.1.16","rollup":"^1.22.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-typescript2":"^0.24.3","rollup-plugin-uglify":"^6.0.3","typescript":"^3.6.4"},"license":"MIT","_id":"react-change-highlight@1.1.3","dist":{"shasum":"b4d7c09769a087b3a5a76302978a8cd0eaab9191","integrity":"sha512-VAeHqHVeUPIoB89TVFzQuUb65XmF4fIl8UJ/9kjlHaFv+SJGGOlJRAwj5ZdLqxt7d5cRZDXdXxvwJEgv+sIRYg==","tarball":"https://registry.npmjs.org/react-change-highlight/-/react-change-highlight-1.1.3.tgz","fileCount":11,"unpackedSize":9885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdwiAQCRA9TVsSAnZWagAAbc8P/iNeZHZUomuod6LeYoko\n7tg3NK6AVcPuyD0Y3UIIybRzHH9a89PW1jm2ijbRErZcZyqZ7LoswrgA9E7x\nILascQ04RpwfkeyTcnmoKvfUsaQiLmFtCT/zlheIF9HTA5RB1PiW+Db5Azc3\nbQsq2mMFIY4ooCy/r/IviwFH/GjS9dtwV5m4m0Cd04M5bq1WKUWyfCrQ2ad1\nUMLeirKbj48gvSOdGG2zhZLXz/8PLqF3yaKdk4z77mC/zdTCVVhHVrwcQqJp\nZ9U4/tULJ3WLMjHrb9F6sWM6kG9XGs7emMbe56ZvGwG3trbwMxcJ8Zo6qxJl\nWvQIkZ8aodyosXaV1WhFYFvPwKcDGbO05oGHuvsbPGmQsBsN3b5WpaybvWI3\nQV924MxTB51dDGur6j04nhqoeysACK5fySTJxTYhm/NqyA6VdhUA7ds6MaNi\nK40TYSGXqTIxa9zU2L9JE4lVALkk9XjA3XHNz44f7brzC2hIq0/HLv/9rVhA\nyd27OLvytd1L0dOm15+0zmkrxRZwa6lZ4bacBNKX/09bAWYjJfmk+/8zdWHd\nNSzAX15pGdzWaWbmepI0697GBdP27UfJhUDawww6eHgKgbEdALjozdoXzb/p\nFuxRv/Pf8PpgzjOaK0bUD8YuPuyjHKPmREryCqtOg+nn2f34SowMl5eDHL7B\n4eBc\r\n=qrM8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFKumCVzVwfMoSO+TpT2f8vvdeeVPm1o17GdMslEILBmAiBU+MJPQKce50ZRrwsX4vMt/ppv5PuBtWn16gFV57v0Lw=="}]},"maintainers":[{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"}],"_npmUser":{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-change-highlight_1.1.3_1573003280098_0.8845103343282648"},"_hasShrinkwrap":false},"1.2.0-0":{"name":"react-change-highlight","description":"React component to highlight the changed content immediately and bring focus of the user into the changed part","author":{"name":"Medhat Dawoud","email":"medhatdawoud@gmail.com"},"keywords":["ux","react-highlight","react-change","highlight","change-highlight"],"main":"build/index.js","repository":{"type":"git","url":"https://github.com/medhatdawoud/react-change-highlight"},"version":"1.2.0-0","peerDependencies":{"react":"^16.8","react-dom":"^16.8"},"scripts":{"start":"yarn build","test":"echo 'pass'","build":"rollup -c","postbuild":"npm pack && tar -xvzf *.tgz && rm -rf package *.tgz","prepublishOnly":"rm -rf build && npm run build","release":"np --no-release-draft"},"devDependencies":{"@babel/core":"^7.6.2","@babel/preset-env":"^7.6.2","@babel/preset-react":"^7.0.0","@types/react":"^16.9.11","@types/react-dom":"^16.9.3","babel-loader":"^8.0.6","babel-plugin-module-resolver":"^3.2.0","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^2.1.1","np":"5.1.0","react":"^16.10.1","react-dom":"^16.10.1","react-styleguidist":"^9.1.16","rollup":"^1.22.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-typescript2":"^0.24.3","rollup-plugin-uglify":"^6.0.3","typescript":"^3.6.4"},"license":"MIT","readmeFilename":"README.md","readme":"# react-change-highlight\n[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors)\n[![NPM](https://nodei.co/npm/react-change-highlight.png)](https://nodei.co/npm/react-change-highlight/)\n> React Change Highlight is a react component to highlight changes in the wrapped component to enhance the UX and grap the focus of the user into the changed value of some parts like the cart in an e-commerce application for example.\n\nThis is a real use case we are using in our company\n![UseCase](https://i.imgur.com/vHxyHrN.gif)\n\nYou can play around with it on this sandbox [codesandbox.io/react-change-highlight](https://codesandbox.io/s/react-change-highlight-example-fcwh9)\n\n## Install\n```\nyarn add react-change-highlight\n```\nor\n```\nnpm install react-change-highlight\n```\n\n## Usage\nBasically you need to wrap the components you want to highlight on change inside `HighlightChange` element then add `ref` attribute to each child in this component to be used to be highlighted.\n\nIn the following example the `count` variable comes from state, so when ever that function `setCount()` is called with any different value the background of that wrapped div will be changed\n```jsx\nimport ChangeHighlight from 'react-change-highlight';\n\nexport default () => {\n const [count, setCount] = useState(0);\n\n return (\n \n
{count}
\n \n );\n}\n```\n\nDefault styling for highlighting in case the user didn't use a custom styling using the `highlightStyle` property:\n```css\n.react-highlight {\n background-color: #f8ffb4;\n transition: all 0.5s ease-in-out;\n }\n```\n\n## Props\n|Property|Type|Default|Description|\n|--|--|--|--|\n|`showAfter`|number|500|number of milli seconds before start highlighting|\n|`hideAfter`|number|2500|number of milli seconds before ending highlighting|\n|`containerClassName`|string||className for component container|\n|`highlightStyle`|string||className for highlighing content|\n|`disabled`|boolean|false|weather you need to disable highlighting|\n---\n\n## Contributors āœØ\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n \n \n \n
\"Medhat
Medhat Dawoud
šŸ’» šŸ“ šŸ“–
\n\n\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!","_id":"react-change-highlight@1.2.0-0","dist":{"shasum":"98a3c8d829fbaa596141589618a8645f110a9b83","integrity":"sha512-iOT0ZiQDK6Dq0n7ncAHvV9nEqTGY7JjseQNWwL4C4/mjCpx8u9FQrxWxW8iWyf8aVxfyaLch+CNQhDPpr/Gn4A==","tarball":"https://registry.npmjs.org/react-change-highlight/-/react-change-highlight-1.2.0-0.tgz","fileCount":14,"unpackedSize":14512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdw3F1CRA9TVsSAnZWagAA164QAKQV8SGy7mhw/OX/acjE\nCIyRxDcfhmoGGPy+95/Y+LTp1ibcm88eZgoXL3DpDpBNos08Z1oiaubHY/me\nbB5Mzqp8piSZtvNu9ru7pJbWmSTsQUF52jXMCjqzwz4fwLiN5vSZbognVqbg\n+XiVe1380fHTHk5MdsoNpvc7p4swRaV9/JGw6YOFFHZp1kqtd0OGC0ob/QE8\nRtb9E6wAMofYbTNs+Q10MqMhyHOYXU1nDmjuxAS8OLmuPKPTK0w89BOPO/g9\nf/1eKhw4QYupr0emCmLixQeMDf0QfeIifFk5lFLlb1wL9KGjB/o1z129vWD9\nJdyDPz58J0paQoxwRhS8dzD1hv/y5/FVf5ekjRJEJp+oMIW3GEzkZkPKATQL\nqFfKexl++r45MxxYiVqzEbpQtdbblGxUwSF+Nn3pOc0Y1G0xQTW3skIBHHeB\nr9CxFohHFui68uACdibDnITT3jpyTX7qey0JiFk5mzGHJP/YoQ+MGA2v6ANw\nYEckHyGb7TKwEI3i4UbZegUZ9Qb4dWLBlikG72M7stbSS+nAyfprxVMTo5hd\nd3FWyrSrGZEJtdSgC8NG7d+qu+BZD6H8Vpr4SkviLoj0teLhECDeirsP+xWI\nmg8GGmQ5TF8767V0TnipUYuOqlh0H98Jpa4cSvL4tGsUSBBTrInAVHC0Nw5a\ngwJh\r\n=zrvH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDEPL26mIIBSKICNOUJKFwMqwqMSbFUrgDtpFw5+xZBswIgOUjidSgLvR1jsbKDKLAKspGnHf+IbkFbcTeC4H7+nNQ="}]},"maintainers":[{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"}],"_npmUser":{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-change-highlight_1.2.0-0_1573089652994_0.9343130865590146"},"_hasShrinkwrap":false},"1.2.0":{"name":"react-change-highlight","description":"React component to highlight the changed content immediately and bring focus of the user into the changed part","author":{"name":"Medhat Dawoud","email":"medhatdawoud@gmail.com"},"keywords":["ux","react-highlight","react-change","highlight","change-highlight"],"main":"build/index.js","repository":{"type":"git","url":"https://github.com/medhatdawoud/react-change-highlight"},"version":"1.2.0","peerDependencies":{"react":"^16.8","react-dom":"^16.8"},"scripts":{"start":"yarn build","test":"echo 'pass'","build":"rollup -c","postbuild":"npm pack && tar -xvzf *.tgz && rm -rf package *.tgz","prepublishOnly":"rm -rf build && npm run build","release":"np --no-release-draft"},"devDependencies":{"@babel/core":"^7.6.2","@babel/preset-env":"^7.6.2","@babel/preset-react":"^7.0.0","@types/react":"^16.9.11","@types/react-dom":"^16.9.3","babel-loader":"^8.0.6","babel-plugin-module-resolver":"^3.2.0","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^2.1.1","np":"5.1.0","react":"^16.10.1","react-dom":"^16.10.1","react-styleguidist":"^9.1.16","rollup":"^1.22.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-typescript2":"^0.24.3","rollup-plugin-uglify":"^6.0.3","typescript":"^3.6.4"},"license":"MIT","_id":"react-change-highlight@1.2.0","dist":{"shasum":"88ca91270fbae1527f219d7e97acb75dee89084a","integrity":"sha512-Kb5cre/g/+jiF58qe4jjEfUMNluDvqLohgPDOti7BupUSA5XRL9QcrrKBITypXfK1yIwGCXxiCBLq83RAOC+Ag==","tarball":"https://registry.npmjs.org/react-change-highlight/-/react-change-highlight-1.2.0.tgz","fileCount":14,"unpackedSize":16262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxd87CRA9TVsSAnZWagAAe2AP/Ry9NeVAKzhe+PskF6rU\nqO5vVabBlRc75Sfh1hQMwUrom6QgmfUZhV8ZEENRYltvbPFMyp2DT2C3dE4P\nnSkdyyK9Xt91bgMd0wjFIcnBegdjYylDIPzvh9hsCfWW0JDwNPt+UpJY0DWe\nVdLu498sK3mRvCpx8t59D/TkmYUC+XMZFQNJa/aSCcORRfIhmCvJgwZkkRGF\nJzqGq6R5H8r85qVVrTJyJKixPWXjiIh0ke591l8U8gHZqxZVuUuW31HKsTvw\nRIcPPi8d9w3FP4x8r5ivewsDmhJVVNM/++SfEypgAvuQTYU2yLamrEKvB3ra\n/d88tdLvplygvYOFVE4GUmbBAH1TKKwEzxxNH1xNHRRyF+KnsSOv+TL+2JFJ\nLEzdkpCR9JXlvGHm3dyqfCaMtiyNOL/BtXjkv9gHWyv8wqVGsFoqmnVv+IRY\njP15vRCYs5y2+J/B3QI1wvBsDeFfNr6b3+46381h14eBlnHwJdxDgeyYvB6+\nAC0EOO6Vh0BWxifobRGTITY+2en5gKYfdPBM/AlLhLfmuRZO2P8d/wZN+VYC\n/lqsjLPzFC0qVWDfFafU4zSf8NCsJNLOb+VDHpVgjefSCT/2Atcu82lCCsVB\noFGIb9Lho4b6pvt9zWwe1LbmW7XJpMWuTIMorcUS+XewuJO0+YLO8R9j7YI3\ncUL1\r\n=IxZY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDLFJGVgQTDkjJq9wHsAmiJzXk6gj91jSO5dzDfIaanwAIgZah6/CNQ0fQt/02jKvYGLcN/k/ZSsJd8Jn7G7d8MryA="}]},"maintainers":[{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"}],"_npmUser":{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-change-highlight_1.2.0_1573248826835_0.3579507741857817"},"_hasShrinkwrap":false},"1.2.1-0":{"name":"react-change-highlight","description":"React component to highlight the changed content immediately and bring focus of the user into the changed part","author":{"name":"Medhat Dawoud","email":"medhatdawoud@gmail.com"},"keywords":["ux","react-highlight","react-change","highlight","change-highlight"],"main":"build/index.js","repository":{"type":"git","url":"https://github.com/medhatdawoud/react-change-highlight"},"version":"1.2.1-0","peerDependencies":{"react":"^16.8","react-dom":"^16.8"},"scripts":{"start":"yarn build","test":"echo 'pass'","build":"rollup -c","postbuild":"npm pack && tar -xvzf *.tgz && rm -rf package *.tgz","prepublishOnly":"rm -rf build && npm run build","release":"np --no-release-draft"},"devDependencies":{"@babel/core":"^7.6.2","@babel/preset-env":"^7.6.2","@babel/preset-react":"^7.0.0","@types/react":"^16.9.11","@types/react-dom":"^16.9.3","babel-loader":"^8.0.6","babel-plugin-module-resolver":"^3.2.0","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^2.1.1","np":"5.1.0","react":"^16.10.1","react-dom":"^16.10.1","react-styleguidist":"^9.1.16","rollup":"^1.22.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-typescript2":"^0.24.3","rollup-plugin-uglify":"^6.0.3","typescript":"^3.6.4"},"license":"MIT","readmeFilename":"README.md","readme":"# react-change-highlight\n\n[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors)\n\n> React Change Highlight is a react component to highlight changes in the wrapped component to enhance the UX and grap the focus of the user into the changed value of some parts like the cart in an e-commerce application for example.\n\nThis is a real use case we are using in our company\n![UseCase](https://i.imgur.com/vHxyHrN.gif)\n\nYou can play around with it on this sandbox [codesandbox.io/react-change-highlight](https://codesandbox.io/s/react-change-highlight-example-fcwh9)\n\n## Install\n\n```\nyarn add react-change-highlight\n```\n\nor\n\n```\nnpm install react-change-highlight\n```\n\n## Usage\n\nBasically you need to wrap the components you want to highlight on change inside `ChangeHighlight` element (default import) then add `ref` attribute to each child in this component which you want to highlight when they got their content changed.\n\nIn the following example the `count` variable comes from state, so when ever that function `setCount()` is called with any different value the background of that wrapped div will be changed as a default action, but actually it can be any kind of animation you make into the class you will pass to `highlightStyle` attribute.\n\n```jsx\nimport ChangeHighlight from \"react-change-highlight\";\n\nexport default () => {\n const [count, setCount] = useState(0);\n\n return (\n \n
{count}
\n \n );\n};\n```\n\nDefault styling for highlighting in case the user didn't use a custom styling using the `highlightStyle` property is `rc-highlight` class and it is as follow:\n\n```css\n.rc-highlight {\n background-color: #f8ffb4;\n transition: all 0.5s ease-in-out;\n}\n```\n\n## SSR (server-side rendering)\n\nIn case of using this module in a server-side rengering app, you should make sure to create and pass your own className to the `highlightStyle` attribute, and to make some hint for you, add `ssr` attribute to the `ChangeHighlight` element, so it can give you a hint to add a class in your console as a warning like this.\n\n```text\nāš ļø \"react-change-highlight\", As you're using server-side rendering, it's a must to create and pass your css class to the highlightStyle attribute for \"ChangeHighlight\" component\n```\n\n## Props\n\n| Property | Type | Default | Description |\n| -------------------- | ------- | ------- | ----------------------------------------------------------------------------------------------------- |\n| `showAfter` | number | 500 | number of milli seconds before start highlighting |\n| `hideAfter` | number | 2500 | number of milli seconds before ending highlighting |\n| `containerClassName` | string | | className for component container |\n| `highlightStyle` | string | | className for highlighing content (a must in case of SSR) |\n| `disabled` | boolean | false | weather you need to disable highlighting |\n| `ssr` | boolean | false | you need to pass this in case of using it with server-side rendering. (gives a hint for adding style) |\n\n---\n\n## Contributors āœØ\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n \n \n \n
\"Medhat
Medhat Dawoud
šŸ’» šŸ“ šŸ“–
\n\n\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","_id":"react-change-highlight@1.2.1-0","dist":{"shasum":"de4dd1fe1689d99f0c0d9426b384b15a5596739e","integrity":"sha512-7LOZPSvU9jTfmnexI+gHc6I2SNLz9UOql55zXtrhaZBOLErAw55vSuKqnWNeDz1yzKg2+tqEsWPCW6tQL0DgcQ==","tarball":"https://registry.npmjs.org/react-change-highlight/-/react-change-highlight-1.2.1-0.tgz","fileCount":14,"unpackedSize":16769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxeN+CRA9TVsSAnZWagAAwhcP/0A5wQ3c9WpFNUqKYeB3\nS/RSwUy6NKlIj6qFr3LTheA7vIPBr+95to0tMCvDc8wvi/YkWVK5GLuyRZ5X\nw0+XeBSvukaG41tLfZlY+AUyKB9wQj1noq4eoqE8ZpIz6uE0+S1YJGJjyM9W\nCdC5ImjYJvXxA0vH8TCrfMPHQP4Yixul6W4kN4qXgQZo+wK6lvmd9IvV2weC\n3CMb1vxk1lE+vh84x5HXAfsjL8KqI4D55HvntNX6lUnF+x1vPf2h0ePpDs+8\npA2cjnYZr+mv8sDV1CFYp/UAwXOKk2GOZh0igiRwtTFLrTp7vOs4mBzfiVFw\nPwdUTSUVfKD8m6pOPrKZfG8yWkDizNYtVH+hLnadtnb1jJE6NCLpx8WXbHua\nhwJ2hsKJcG601I/jNgW0TV0pGcxJ7XVhOVGtHrTY4LqqYmfOYNexaBLQqVI+\nkaazOcFbekWk5FG3uAJZuhdjKV3SOkKUVXKPjDI8j5wZe6o9JjuNmQH/+tg4\nNFYJmS4uoG2X/SIHw3PQhk+eqdey0Zk23e8hMIxArTtdJoI6+JvaY5CXv+iY\nTvXzJVkSyFc9j1sTEeLvWG/CTpOTdyJN5JfMEi4vY5SF4LYE2KtH7oztvO7S\n7SR493EzNqGhhKhPfJGnfuXj7Meo9NZFh5Fus5ctoVAecMuOVvhnuudeOewJ\nY1Aw\r\n=Kmyk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDPbx1bsgtSTJtx/WdswSgJgOYq25nLzHdQauPkpYlaHAIhAKhxsrlagsI8OfI8J0ur2ON78rWerpcK+PphUt8KgNNB"}]},"maintainers":[{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"}],"_npmUser":{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-change-highlight_1.2.1-0_1573249918295_0.9840371847087293"},"_hasShrinkwrap":false},"1.2.1":{"name":"react-change-highlight","description":"React component to highlight the changed content immediately and bring focus of the user into the changed part","author":{"name":"Medhat Dawoud","email":"medhatdawoud@gmail.com"},"keywords":["ux","react-highlight","react-change","highlight","change-highlight"],"main":"build/index.js","repository":{"type":"git","url":"https://github.com/medhatdawoud/react-change-highlight"},"version":"1.2.1","peerDependencies":{"react":"^16.8","react-dom":"^16.8"},"scripts":{"start":"yarn build","test":"echo 'pass'","build":"rollup -c","postbuild":"npm pack && tar -xvzf *.tgz && rm -rf package *.tgz","prepublishOnly":"rm -rf build && npm run build","release":"np --no-release-draft"},"devDependencies":{"@babel/core":"^7.6.2","@babel/preset-env":"^7.6.2","@babel/preset-react":"^7.0.0","@types/react":"^16.9.11","@types/react-dom":"^16.9.3","babel-loader":"^8.0.6","babel-plugin-module-resolver":"^3.2.0","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^2.1.1","np":"5.1.0","react":"^16.10.1","react-dom":"^16.10.1","react-styleguidist":"^9.1.16","rollup":"^1.22.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-typescript2":"^0.24.3","rollup-plugin-uglify":"^6.0.3","typescript":"^3.6.4"},"license":"MIT","licenseText":"MIT License\n\nCopyright (c) 2019 Medhat Dawoud\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","_id":"react-change-highlight@1.2.1","dist":{"shasum":"d2688893f072035a0d51c71a08f0813b17f85d51","integrity":"sha512-gUWXUGRePv8nB4Ljp5FmXST6C5cRM1c8mqh5Y9h48Rub39lqgagCzlBoFvE9aYCMOTACxWCsTc+pAOsMwU9NCA==","tarball":"https://registry.npmjs.org/react-change-highlight/-/react-change-highlight-1.2.1.tgz","fileCount":16,"unpackedSize":19129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdy0AVCRA9TVsSAnZWagAAqkYP/ihtH6WrwlWN1maaXOA1\nv9TCX8Hw6sGdnLioWONI7DZQOTTfRbPaJGGo2ByKz766UTRRye7XSywxdqJ0\nbef6s0Kh5XXBU5oG1bAL4+zBt2RD6wiiIaD3/rbhIgfgbtDvmtGGcwL05B1c\nY0/ZU/9Pn6gEYk/X/2CrARDMzfQvyp8dj6QMTlcsFIeVN4G0mQU91NVC38xE\nuVakjYmtQi02RPWRcJmBwr/1T9cepOHvldoBmIeAyhQMDCDRB7Vcz2ODxQZ7\nsWnEmOUzkYt6X0IMxKhxUl07AhbdqzFwUyyuv+hiED4pytyYbjoFOWbfbyfE\nFPEUhvSeDWrsqbAXuSOLg9KbhFyjWuC3qDmP1ZcaYM/wC6opwpjB3e2I64nj\n0WkC1yPM42Q5VA61wdSK6c3f+2VcaKAjkn3/O8hkH0QlOgfvJAgk4cLQcpcd\nytAJBd3GIzZNYyEbUek+ISTEZXtCxGwALOdXlltANn+2ldwcjOAFXXo/00Fa\nY4Ktu3RJRX/jSUTEiZzh7RZ+iVHzJrxrmnm3tqSvpf0eZaHNr8WMOOtqxu76\nknEON8E7iOao+qsDkh58g4944U0eWMF4FG1eKOtU57y8HUu+2r+YI+j0Vg7u\nykrX3kF+IXI9UFfT7Bvi4A5bzpuijCxrmWB+QNLZAZC0F7eabAlPMgqigXlq\nubtf\r\n=6ywK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDTusiB7McbCtqCF4soCDUBIHHRBHBAU7Fbea20RMc+LAiEAw4pfV1eG5sUDok7f2HPgwpx/syZuS38XGJef+qGFSoQ="}]},"maintainers":[{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"}],"_npmUser":{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-change-highlight_1.2.1_1573601300446_0.3463677198300894"},"_hasShrinkwrap":false},"1.2.2":{"name":"react-change-highlight","description":"React component to highlight the changed content immediately and bring focus of the user into the changed part","author":{"name":"Medhat Dawoud","email":"medhatdawoud@gmail.com"},"keywords":["ux","react-highlight","react-change","highlight","change-highlight"],"main":"build/index.js","repository":{"type":"git","url":"https://github.com/medhatdawoud/react-change-highlight"},"version":"1.2.2","peerDependencies":{"react":">= 16.8","react-dom":">= 16.8"},"scripts":{"start":"yarn build","test":"echo 'pass'","build":"rollup -c","postbuild":"npm pack && tar -xvzf *.tgz && rm -rf package *.tgz","prepublishOnly":"rm -rf build && npm run build","release":"np --no-release-draft"},"devDependencies":{"@babel/core":"^7.6.2","@babel/preset-env":"^7.6.2","@babel/preset-react":"^7.0.0","@types/react":"^16.9.11","@types/react-dom":"^16.9.3","babel-loader":"^8.0.6","babel-plugin-module-resolver":"^3.2.0","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^2.1.1","np":"5.1.0","react":"^16.10.1","react-dom":"^16.10.1","react-styleguidist":"^9.1.16","rollup":"^1.22.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-typescript2":"^0.24.3","rollup-plugin-uglify":"^6.0.3","typescript":"^3.7.2"},"license":"MIT","licenseText":"MIT License\n\nCopyright (c) 2019 Medhat Dawoud\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","_id":"react-change-highlight@1.2.2","dist":{"shasum":"6c647e16b9026ec550d699bfd6573f6f91215ee6","integrity":"sha512-aQ87aEOtGgpMzqbxZTWoTHJCnq+1vFxVs/r5K29idat9u9Gc/BvUSCtsjAfNzMHo7v2s5Mvqem4e5Yw/ikF77A==","tarball":"https://registry.npmjs.org/react-change-highlight/-/react-change-highlight-1.2.2.tgz","fileCount":17,"unpackedSize":20832,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd1bYhCRA9TVsSAnZWagAAassP/AiSm4eF7sfCi+pKQ4xg\ntqPslT3xJR1WSgR9ZmUm2ihSMVN0k5IRSkPtq8vT/U9uYb60/QGrkU8vAx5R\nssFtoUreZ31fuhjexpUlevWWjXUUdveUs/6RGvNuOB6ZfOph2XD5V0Bbwt07\n1a4QAgSmw4ypYh+mfmlxc6/ziU4fVJiFZTaebmuUXR/ejOOdflBjOtxoYULd\nsspBZWT08qln5pwT9QGUjGjfoR0q7xw/ERTH052cQMLHzTEtoUQDBP56VI0h\nkVnKbm977efb60M8SyrqcYsxzEa/pnIIIzqHM06S8AuA83GY7vBW0kO9KLNf\nGrw7rKnWmITAP+8TfBoC1KOqOqfg3V0VnaTadbekWSgkUTw1uOTU8cA1t8I9\nIIkiScVgIZl04R2WpEYG5tyafCD+dSEKM/UBdcnVwY7rpooIAqukFk8m/Wem\nxXiZMPMsJiwnwKMD1meP3u1N4lDYvO82JZF1RlXbWiE4cW3odO+yFKTNt6Hz\n+HY1XK3INvBbwOp7UGQNiZNGEUOJSpHIykqwHouNne74WjWXJX9jsBgJK21Q\nFjjaFH4eGTgY1RgxBHdCmM0DTMuts6PzpERN/b/6OzASqyI5pnUnraID6MWJ\nTVizkvWXFJvln5ZzOT+SNCsMu3JDZHX+hGgHGGj7pAlruGdvruICDOpeqptJ\nZzjN\r\n=v78c\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH347Jro6BwZMQ965zk8ADe+9ZDtHbvl+hAfubtCv40PAiEA5rqrhL+f5eJdo3XC6R1xGed6yuTodQVHMl99GLofMdk="}]},"maintainers":[{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"}],"_npmUser":{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-change-highlight_1.2.2_1574286880713_0.5286095183836785"},"_hasShrinkwrap":false},"1.2.3-0":{"name":"react-change-highlight","description":"React component to highlight the changed content immediately and bring focus of the user into the changed part","author":{"name":"Medhat Dawoud","email":"medhatdawoud@gmail.com"},"keywords":["ux","react-highlight","react-change","highlight","change-highlight"],"main":"build/index.js","repository":{"type":"git","url":"https://github.com/medhatdawoud/react-change-highlight"},"version":"1.2.3-0","peerDependencies":{"react":">= 16.8","react-dom":">= 16.8"},"scripts":{"start":"yarn build","test":"echo 'pass'","build":"rollup -c","postbuild":"npm pack && tar -xvzf *.tgz && rm -rf package *.tgz","prepublishOnly":"rm -rf build && npm run build","release":"np --no-release-draft"},"devDependencies":{"@babel/core":"^7.6.2","@babel/preset-env":"^7.6.2","@babel/preset-react":"^7.0.0","@types/react":"^16.9.11","@types/react-dom":"^16.9.3","babel-loader":"^8.0.6","babel-plugin-module-resolver":"^3.2.0","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^2.1.1","np":"5.1.0","react":"^16.10.1","react-dom":"^16.10.1","react-styleguidist":"^9.1.16","rollup":"^1.22.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-typescript2":"^0.24.3","rollup-plugin-uglify":"^6.0.3","typescript":"^3.7.2"},"license":"MIT","readmeFilename":"README.md","readme":"# react-change-highlight\n\n[![All Contributors](https://img.shields.io/badge/all_contributors-3-orange.svg)](#contributors)\n[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/medhatdawoud/react-change-highlight/blob/master/LICENSE) \n[![npm version](https://img.shields.io/npm/v/react-change-highlight.svg?style=flat)](https://www.npmjs.com/package/react-change-highlight)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/medhatdawoud/react-change-highlight/blob/master/CONTRIBUTING.md)\n\n> React Change Highlight is a react component to highlight changes in the wrapped component to enhance the UX and grap the focus of the user into the changed value of some parts like the cart in an e-commerce application for example.\n\nThis is a real use case we are using in our company\n![UseCase](https://i.imgur.com/vHxyHrN.gif)\n\nYou can play around with it on this sandbox [codesandbox.io/react-change-highlight](https://codesandbox.io/s/react-change-highlight-example-fcwh9)\n\n## Install\n\n```\nyarn add react-change-highlight\n```\n\nor\n\n```\nnpm install react-change-highlight\n```\n\n## Usage\n\nBasically you need to wrap the components you want to highlight on change inside `ChangeHighlight` element (default import) then add `ref` attribute to each child in this component which you want to highlight when they got their content changed.\n\nIn the following example the `count` variable comes from state, so when ever that function `setCount()` is called with any different value the background of that wrapped div will be changed as a default action, but actually it can be any kind of animation you make into the class you will pass to `highlightStyle` attribute.\n\n```jsx\nimport ChangeHighlight from \"react-change-highlight\";\n\nexport default () => {\n const [count, setCount] = useState(0);\n\n return (\n \n
{count}
\n \n );\n};\n```\n\nDefault styling for highlighting in case the user didn't use a custom styling using the `highlightStyle` property is `rc-highlight` class and it is as follow:\n\n```css\n.rc-highlight {\n background-color: #f8ffb4;\n transition: all 0.5s ease-in-out;\n}\n```\n\n## SSR (server-side rendering)\n\nIn case of using this module in a server-side rengering app, you should make sure to create and pass your own className to the `highlightStyle` attribute, and to make some hint for you, add `ssr` attribute to the `ChangeHighlight` element, so it can give you a hint to add a class in your console as a warning like this.\n\n```text\nāš ļø \"react-change-highlight\", As you're using server-side rendering, it's a must to create and pass your css class to the highlightStyle attribute for \"ChangeHighlight\" component\n```\n\n## Props\n\n| Property | Type | Default | Description |\n| -------------------- | ------- | ------- | ----------------------------------------------------------------------------------------------------- |\n| `showAfter` | number | 500 | number of milli seconds before start highlighting |\n| `hideAfter` | number | 2500 | number of milli seconds before ending highlighting |\n| `containerClassName` | string | | className for component container |\n| `highlightStyle` | string | | className for highlighing content (a must in case of SSR) |\n| `disabled` | boolean | false | weather you need to disable highlighting |\n| `ssr` | boolean | false | you need to pass this in case of using it with server-side rendering. (gives a hint for adding style) |\n\n---\n\n## Contributors āœØ\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n \n \n \n \n \n
\"Medhat
Medhat Dawoud
šŸ’» šŸ“ šŸ“–		\"Islam
Islam ElHakmi
šŸ’»		\"Mohamed
Mohamed Gamal
šŸ› šŸ’»
\n\n\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","licenseText":"MIT License\n\nCopyright (c) 2019 Medhat Dawoud\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","_id":"react-change-highlight@1.2.3-0","dist":{"shasum":"817e03b88a0ce1f235764d10e2817a83c20e0b1b","integrity":"sha512-IIxX9IRPrxOdvrd947CqJ+W+M0hTXCyEMLJQCUVNErOuaNXNNGGS8Aul3iQa1oR7QKxP6sF+esAxSrcQZGlt2w==","tarball":"https://registry.npmjs.org/react-change-highlight/-/react-change-highlight-1.2.3-0.tgz","fileCount":17,"unpackedSize":20885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd1bqJCRA9TVsSAnZWagAAGwMP/1xxk79S4o3bhYRoV6xn\ntSOzeZL2nmJpUKeiNMz/MPn96uAJV3/9ntGGVVvVqYTpvUKdxsmFuF7N5b5G\n2kLUa7lpxnC3Wur7SF6iuslA+xS5Vol7lVumnjvvl/za1ocKofD3N+VaZkmh\nUIh+Q519wC2T0LAiw5BLututJmnYjann9rWRmriCd7gzP3TT2H7CEvUcIPJN\n+hWqivfljld53jcbmMhA6RcBCgoXx8RGrQc7CvJznjyAd+GazuVCjxY2NXhG\n9Pb5H+W6y461otnqpevG7OIuoZA5LpGGaYAN1Id/ojoAoTWynfdV59/ERar9\n74EturL//zUtbK5lKlWcuUVd/Qot8PL1+teapKpJfO2rUzkof8dz4KuSFLwF\n+UJsVEdqfgTL9Sk2BXxa1E2h74SjjdPLSc60wruACupUKD/6q0jrF3Ax9T+n\nFliGtNrQgxxQCqmcDsg79cvUsmyYIiaeDprXmusKzlkOsUB7vcs/auICU69V\nlPRHnzGvyk9x3oSlkwsfuQGn1QQqi0DJ7b+MW7Wd/jpi7ZV0Zm1okFu82NgJ\n68tGPhWpYex4D8yv3ElhfFlDv9go6VIqcTaNvEPg5fweHZtc1rwyVdd7h/FN\nLQe0NUpav9Ceco0uZ6ZL7qChAJG+bzYjIIwLepbUba/sQbkcvZeNao2z6AUL\nqPo2\r\n=jQ4k\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEDNY9JNTxcWbnpeLmb9gW3qxj+0wXg93imZTbdAy+meAiBk36pEMtPq+ly3kKpsr4N6g8ge1SzHfGDdM6rIMvfE0w=="}]},"maintainers":[{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"}],"_npmUser":{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-change-highlight_1.2.3-0_1574288009400_0.4186471910858707"},"_hasShrinkwrap":false},"1.2.3-1":{"name":"react-change-highlight","description":"React component to highlight the changed content immediately and bring focus of the user into the changed part","author":{"name":"Medhat Dawoud","email":"medhatdawoud@gmail.com"},"keywords":["ux","react-highlight","react-change","highlight","change-highlight"],"main":"build/index.js","repository":{"type":"git","url":"https://github.com/medhatdawoud/react-change-highlight"},"version":"1.2.3-1","peerDependencies":{"react":">=16.8","react-dom":">=16.8"},"scripts":{"start":"yarn build","test":"echo 'pass'","build":"rollup -c","postbuild":"npm pack && tar -xvzf *.tgz && rm -rf package *.tgz","prepublishOnly":"rm -rf build && npm run build","release":"np --no-release-draft"},"devDependencies":{"@babel/core":"^7.6.2","@babel/preset-env":"^7.6.2","@babel/preset-react":"^7.0.0","@types/react":"^16.9.11","@types/react-dom":"^16.9.3","babel-loader":"^8.0.6","babel-plugin-module-resolver":"^3.2.0","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^2.1.1","np":"5.1.0","react":"^16.10.1","react-dom":"^16.10.1","react-styleguidist":"^9.1.16","rollup":"^1.22.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-typescript2":"^0.24.3","rollup-plugin-uglify":"^6.0.3","typescript":"^3.7.2"},"license":"MIT","readmeFilename":"README.md","readme":"# react-change-highlight\n\n[![All Contributors](https://img.shields.io/badge/all_contributors-3-orange.svg)](#contributors)\n[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/medhatdawoud/react-change-highlight/blob/master/LICENSE) \n[![npm version](https://img.shields.io/npm/v/react-change-highlight.svg?style=flat)](https://www.npmjs.com/package/react-change-highlight)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/medhatdawoud/react-change-highlight/blob/master/CONTRIBUTING.md)\n\n> React Change Highlight is a react component to highlight changes in the wrapped component to enhance the UX and grap the focus of the user into the changed value of some parts like the cart in an e-commerce application for example.\n\nThis is a real use case we are using in our company\n![UseCase](https://i.imgur.com/vHxyHrN.gif)\n\nYou can play around with it on this sandbox [codesandbox.io/react-change-highlight](https://codesandbox.io/s/react-change-highlight-example-fcwh9)\n\n## Install\n\n```\nyarn add react-change-highlight\n```\n\nor\n\n```\nnpm install react-change-highlight\n```\n\n## Usage\n\nBasically you need to wrap the components you want to highlight on change inside `ChangeHighlight` element (default import) then add `ref` attribute to each child in this component which you want to highlight when they got their content changed.\n\nIn the following example the `count` variable comes from state, so when ever that function `setCount()` is called with any different value the background of that wrapped div will be changed as a default action, but actually it can be any kind of animation you make into the class you will pass to `highlightStyle` attribute.\n\n```jsx\nimport ChangeHighlight from \"react-change-highlight\";\n\nexport default () => {\n const [count, setCount] = useState(0);\n\n return (\n \n
{count}
\n \n );\n};\n```\n\nDefault styling for highlighting in case the user didn't use a custom styling using the `highlightStyle` property is `rc-highlight` class and it is as follow:\n\n```css\n.rc-highlight {\n background-color: #f8ffb4;\n transition: all 0.5s ease-in-out;\n}\n```\n\n## SSR (server-side rendering)\n\nIn case of using this module in a server-side rengering app, you should make sure to create and pass your own className to the `highlightStyle` attribute, and to make some hint for you, add `ssr` attribute to the `ChangeHighlight` element, so it can give you a hint to add a class in your console as a warning like this.\n\n```text\nāš ļø \"react-change-highlight\", As you're using server-side rendering, it's a must to create and pass your css class to the highlightStyle attribute for \"ChangeHighlight\" component\n```\n\n## Props\n\n| Property | Type | Default | Description |\n| -------------------- | ------- | ------- | ----------------------------------------------------------------------------------------------------- |\n| `showAfter` | number | 500 | number of milli seconds before start highlighting |\n| `hideAfter` | number | 2500 | number of milli seconds before ending highlighting |\n| `containerClassName` | string | | className for component container |\n| `highlightStyle` | string | | className for highlighing content (a must in case of SSR) |\n| `disabled` | boolean | false | weather you need to disable highlighting |\n| `ssr` | boolean | false | you need to pass this in case of using it with server-side rendering. (gives a hint for adding style) |\n\n---\n\n## Contributors āœØ\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n \n \n \n \n \n
\"Medhat
Medhat Dawoud
šŸ’» šŸ“ šŸ“–		\"Islam
Islam ElHakmi
šŸ’»		\"Mohamed
Mohamed Gamal
šŸ› šŸ’»
\n\n\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","licenseText":"MIT License\n\nCopyright (c) 2019 Medhat Dawoud\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","_id":"react-change-highlight@1.2.3-1","dist":{"shasum":"e910304a1adc233c18c36906c29523c2ed7e1e22","integrity":"sha512-VfDr3xvFAb8ItHZkWsFb+VKPt1lLuO/cjR0kx6ijmwDCw842At/sTIW5ODTxJmgzQTkv2NxyIyNnQX3+mQs7MQ==","tarball":"https://registry.npmjs.org/react-change-highlight/-/react-change-highlight-1.2.3-1.tgz","fileCount":17,"unpackedSize":20938,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd1buiCRA9TVsSAnZWagAACa0P/i9Jcynh+L2ncc9hvtD4\nftw7mNBzjC25Xhi0CMGIlyf8IB9lawXvhGHWMEFUe3joVwD5b7h/S4dt1mse\nUmbDqzAVbsiKXcuI/+jUp5VsA0WVTmTizdDyI4tNJGTX8u2UFrDAuw/pnndP\niz8u8oAhvqKZKzXJP6deaa85d36kkJ24plR6XIhXWkRl9K1Z7hyr35N377Jl\nYUwTBbNDWgf/+0gvqIUW9dy29qEVfWSy4zhE+2Maf/bdurLzZt/SnQTFpYL6\nQ0WGB6lOy6clEVVbWEadIFgMRzQaHFk6LC3HMbodS7+ZIxcYpIeNPlg4TwMP\ndSMqC+82TQGQ0rLq/W1RkNHDlNWrhMCXPOHhCHLueoQfrlZfVmwx8m1ZhxcS\nKR9/MG4q38uVQhqgAKug3JPr0vv77oWmVpK4WdZvqhsO2pMYxqXQ1426pHB5\nec3FHzwJd2JoQuw5xgb2T8ird/TwkWXMoTFoohaCw0+hL094F39ceOoiFJMO\nzMHdC/lNlF49kWlLB9Pxz7WL2gxT39uUBYy2GxZ8zfZMMlgqJ/7WoxuGfqwJ\nr7Bwyde5OM9UF8n9Zo4hGmk7j5AtOwGx/T7HfgGxgUUXLHk+q50Km+JoFwxZ\nX+k1loZs8b70mgoI+5kzH5I1+n3BGEu1SGKDGa0gqtW5HNbInjdM1cglsH0Y\nagWK\r\n=3+v8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCGg/Jcx3ZshYlxr8pAs59yDSWKeoK5po8eK3OHJ6eMbgIhAK8gfhXXWhh6xtcy/A5WsiS6gdtN9iafFZMrnfBGjMX4"}]},"maintainers":[{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"}],"_npmUser":{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-change-highlight_1.2.3-1_1574288289877_0.4165751342729671"},"_hasShrinkwrap":false},"1.2.3-2":{"name":"react-change-highlight","description":"React component to highlight the changed content immediately and bring focus of the user into the changed part","author":{"name":"Medhat Dawoud","email":"medhatdawoud@gmail.com"},"keywords":["ux","react-highlight","react-change","highlight","change-highlight"],"main":"build/index.js","repository":{"type":"git","url":"https://github.com/medhatdawoud/react-change-highlight"},"version":"1.2.3-2","peerDependencies":{"react":">=16.8","react-dom":">=16.8"},"scripts":{"start":"yarn build","test":"echo 'pass'","build":"rollup -c","postbuild":"npm pack && tar -xvzf *.tgz && rm -rf package *.tgz","prepublishOnly":"rm -rf build && npm run build","release":"np --no-release-draft"},"devDependencies":{"@babel/core":"^7.6.2","@babel/preset-env":"^7.6.2","@babel/preset-react":"^7.0.0","@types/react":"^16.9.11","@types/react-dom":"^16.9.3","babel-loader":"^8.0.6","babel-plugin-module-resolver":"^3.2.0","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^2.1.1","np":"5.1.0","react":"^16.10.1","react-dom":"^16.10.1","react-styleguidist":"^9.1.16","rollup":"^1.22.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-typescript2":"^0.24.3","rollup-plugin-uglify":"^6.0.3","typescript":"^3.7.2"},"license":"MIT","readmeFilename":"README.md","readme":"# react-change-highlight\n\n[![All Contributors](https://img.shields.io/badge/all_contributors-3-orange.svg)](#contributors)\n[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/medhatdawoud/react-change-highlight/blob/master/LICENSE) \n[![npm version](https://img.shields.io/npm/v/react-change-highlight.svg?style=flat)](https://www.npmjs.com/package/react-change-highlight)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/medhatdawoud/react-change-highlight/blob/master/CONTRIBUTING.md)\n\n> React Change Highlight is a react component to highlight changes in the wrapped component to enhance the UX and grap the focus of the user into the changed value of some parts like the cart in an e-commerce application for example.\n\nThis is a real use case we are using in our company\n![UseCase](https://i.imgur.com/vHxyHrN.gif)\n\nYou can play around with it on this sandbox [codesandbox.io/react-change-highlight](https://codesandbox.io/s/react-change-highlight-example-fcwh9)\n\n## Install\n\n```\nyarn add react-change-highlight\n```\n\nor\n\n```\nnpm install react-change-highlight\n```\n\n## Usage\n\nBasically you need to wrap the components you want to highlight on change inside `ChangeHighlight` element (default import) then add `ref` attribute to each child in this component which you want to highlight when they got their content changed.\n\nIn the following example the `count` variable comes from state, so when ever that function `setCount()` is called with any different value the background of that wrapped div will be changed as a default action, but actually it can be any kind of animation you make into the class you will pass to `highlightStyle` attribute.\n\n```jsx\nimport ChangeHighlight from \"react-change-highlight\";\n\nexport default () => {\n const [count, setCount] = useState(0);\n\n return (\n \n
{count}
\n \n );\n};\n```\n\nDefault styling for highlighting in case the user didn't use a custom styling using the `highlightStyle` property is `rc-highlight` class and it is as follow:\n\n```css\n.rc-highlight {\n background-color: #f8ffb4;\n transition: all 0.5s ease-in-out;\n}\n```\n\n## SSR (server-side rendering)\n\nIn case of using this module in a server-side rengering app, you should make sure to create and pass your own className to the `highlightStyle` attribute, and to make some hint for you, add `ssr` attribute to the `ChangeHighlight` element, so it can give you a hint to add a class in your console as a warning like this.\n\n```text\nāš ļø \"react-change-highlight\", As you're using server-side rendering, it's a must to create and pass your css class to the highlightStyle attribute for \"ChangeHighlight\" component\n```\n\n## Props\n\n| Property | Type | Default | Description |\n| -------------------- | ------- | ------- | ----------------------------------------------------------------------------------------------------- |\n| `showAfter` | number | 500 | number of milli seconds before start highlighting |\n| `hideAfter` | number | 2500 | number of milli seconds before ending highlighting |\n| `containerClassName` | string | | className for component container |\n| `highlightStyle` | string | | className for highlighing content (a must in case of SSR) |\n| `disabled` | boolean | false | weather you need to disable highlighting |\n| `ssr` | boolean | false | you need to pass this in case of using it with server-side rendering. (gives a hint for adding style) |\n\n---\n\n## Contributors āœØ\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n \n \n \n \n \n
\"Medhat
Medhat Dawoud
šŸ’» šŸ“ šŸ“–		\"Islam
Islam ElHakmi
šŸ’»		\"Mohamed
Mohamed Gamal
šŸ› šŸ’»
\n\n\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","licenseText":"MIT License\n\nCopyright (c) 2019 Medhat Dawoud\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","_id":"react-change-highlight@1.2.3-2","dist":{"shasum":"8c1cdb37bf9342dd63feb3ed675dbb044508a3e3","integrity":"sha512-i2tNruaK4IN6VindG+XKxanSRV8Z/7a8eKEPIuwqDql2tZPw0KfdkN/OwpndyiSf18sLl52nBmiY+2gWt573/A==","tarball":"https://registry.npmjs.org/react-change-highlight/-/react-change-highlight-1.2.3-2.tgz","fileCount":17,"unpackedSize":20964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd1byxCRA9TVsSAnZWagAA4OAP/RnapXJlb0ALGx3VY0//\nPBaNm8xCXsJLG50A9cet5WPy5S6giC0YTWcIUk0ALhj79F5oqPqO2RRQg60F\nO8V3ST1TgqCN5OrhX51/E/zP0WeuubFZ9O0vDc5PTdhh1Bcbw/Uboe2SoPd+\nEvdI8o9cXEdkFHrR7+KKyfdHUm0xR487J9S8i9fyIcJkYazHsME0LHLEjNsx\nEegTgZ6otGKWkgr3nllMmK0frZJnfyS0aIFma9qLETFMMFVdaVgmQmVrr8wl\nB98griOg+tDM04Yu/QTTJEIaPfYtiTeBGWKVCi5m2j/dr2XTDYGa5lYStzpm\nFRYvqSBqNku95gAVIYbBejDOl67REJCCzLF2ZngSeIoUfrEYne7p+bPV7/f9\n0EvOiUbk13w4axS9YKBPv+ejmOX8m4Nl27VqFbd+bvTa1Z6fbNBlxm+91mYF\nFGuB01lyOLbDkN3tgc5+sA6mY3O1QeriuzMPrhRkPJthv4Q7muK9Gi39DGrO\nbKLdT1lhdNsLBZWfi4bLF2qHXbsHT8p+i9dXrBbAsyikArZ6XyWY6VTG5Pjj\nwlAhKPpwJKJTfNAdHpNSy5Kpivo2Pp+QkP/0gOrQphK0MCs22mgDj7mhEB2s\nHgtIX1b0aBTiGLx3RpGgav3/+lu7XTB5vcLih2/Tg3pBXBTstlLRfqLJpDYi\n0JNL\r\n=COLl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEAX/eXvCQTxk+qoVcbRaCPIDkpnDfJPnXUba0NJU5/YAiBkcQR8fuy30hwtzHU9xQZIFkGZA/6aik2DGL5HOFkAaQ=="}]},"maintainers":[{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"}],"_npmUser":{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-change-highlight_1.2.3-2_1574288560511_0.8153893434462607"},"_hasShrinkwrap":false},"1.2.3":{"name":"react-change-highlight","description":"React component to highlight the changed content immediately and bring focus of the user into the changed part","author":{"name":"Medhat Dawoud","email":"medhatdawoud@gmail.com"},"keywords":["ux","react-highlight","react-change","highlight","change-highlight"],"main":"build/index.js","repository":{"type":"git","url":"https://github.com/medhatdawoud/react-change-highlight"},"version":"1.2.3","peerDependencies":{"react":">=16.8","react-dom":">=16.8"},"scripts":{"start":"yarn build","test":"echo 'pass'","build":"rollup -c","postbuild":"npm pack && tar -xvzf *.tgz && rm -rf package *.tgz","prepublishOnly":"rm -rf build && npm run build","release":"np --no-release-draft"},"devDependencies":{"@babel/core":"^7.6.2","@babel/preset-env":"^7.6.2","@babel/preset-react":"^7.0.0","@types/react":"^16.9.11","@types/react-dom":"^16.9.3","babel-loader":"^8.0.6","babel-plugin-module-resolver":"^3.2.0","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^2.1.1","np":"5.1.0","react":"^16.10.1","react-dom":"^16.10.1","react-styleguidist":"^9.1.16","rollup":"^1.22.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-typescript2":"^0.24.3","rollup-plugin-uglify":"^6.0.3","typescript":"^3.7.2"},"license":"MIT","licenseText":"MIT License\n\nCopyright (c) 2019 Medhat Dawoud\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","_id":"react-change-highlight@1.2.3","dist":{"shasum":"3b2d42faf9a879ae2e7620a2e9ce5e9f2e97ecc1","integrity":"sha512-yjyuOChKNRigQqgOe+LwSsiDXxils90LO+QuZw4fIp9c3RbHYxoHkGhqFQrEOv2x7htVyT4oNU6wxpaFfmtnBw==","tarball":"https://registry.npmjs.org/react-change-highlight/-/react-change-highlight-1.2.3.tgz","fileCount":17,"unpackedSize":20962,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd1b3mCRA9TVsSAnZWagAAVtQP/iqyhDRpaXVJW/5ZYZXA\nAy9vhYjZOHTAkXnKiB/0PIwFGSKeXy5v++R4eawBhLW6sN/5q59HPmqOurtG\n+iuDqBS59afPKOOSWQoY06IiJCa54t6HwbnmkOpzh4L9jw/mej9TTK5ZTVhF\nZWgpraAAJl0ftty4d/Q2yc4CPpyX3MEeKc1Y9KA/hvs2SJG4HHNIYMzbWlQF\nf1memuM/7HVBSm40e1+X+1EF3apFdsebQR0wgXu54YO0IdL+SY3pySjislLe\niHU4pnbkCiDmHX2h4Yq4Y8caj1X6ZjMF1lB4ZmiCpZ50dCMnooZs6FNyh0Ts\nnUZer9t94RZl87637d16IK2HGgh2BP5TKeE85fkU34kFbr4lmwi1TMwFRMBU\nAR4Xz6mfIuZRw6ONL05cQgw21vZgQETrOvEHjCAY9HQCGNyjjb1CQ8TsG3+L\n+a8JKoNSg2FWbux4sGhb0xdLDcL9rTFJ2KGgUt+twjRiNdE/EitK78Z/cx0V\nC5LjDuXdRFAhulK9ovpy5yEnXG1RRf11vz5nAlYJUGxJJxu/8XlgovV+MFGl\nJfZcnLHugvxQK0qkYm7RUfGwH86YXp+JARdGDdCrCWOQNanb8nlC/KUwRyoa\nBYcsGnPMgdBt2BJ2CbsEXRNNpEzpZXrxBUxv+vAFFq2w4TksCk/wH6M0EQd/\ns7uz\r\n=2qoy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA9CmWwMHq/slh9m5O3wkwE4xK0T4InLqT8ITfw8vGPUAiEAgRtuDlundkW1+Tqv1Q6v/johlP/YBn5y7wxvkuFJsh8="}]},"maintainers":[{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"}],"_npmUser":{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-change-highlight_1.2.3_1574288870553_0.43300740943237037"},"_hasShrinkwrap":false},"1.3.0":{"name":"react-change-highlight","version":"1.3.0","description":"React component to highlight the changed content immediately and bring focus of the user into the changed part","keywords":["ux","react","react-highlight","react-change","highlight","change-highlight"],"author":{"name":"Medhat Dawoud","email":"medhatdawoud@gmail.com"},"license":"ISC","repository":{"type":"git","url":"git+https://github.com/medhatdawoud/react-change-highlight.git","directory":"packages/react-change-highlight"},"main":"build/index.js","scripts":{"build":"rollup -c"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8"},"gitHead":"8f0f0353d819b31c97b4492caf0de630eba90ca2","bugs":{"url":"https://github.com/medhatdawoud/react-change-highlight/issues"},"homepage":"https://github.com/medhatdawoud/react-change-highlight#readme","_id":"react-change-highlight@1.3.0","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.20.2/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-E5lMESC5r8YvrnN5Ni7XdLd01O2FfrV2+bQ7gE9k1n7PQOmqPYfhRC41ueUTz2EXnbz+VmyopFOlqMsd47t3cA==","shasum":"5e7264f19896a40ed90a4e57a062bfc61106bbcd","tarball":"https://registry.npmjs.org/react-change-highlight/-/react-change-highlight-1.3.0.tgz","fileCount":22,"unpackedSize":22124,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMhXDCRA9TVsSAnZWagAAKswP/jeT+YeYUydEt4snqp/Q\n9TBuqkT0lKexGsOJeFUJ2ZD2q2TnvZtL3BoU+wLREEwVp292+XN+LVmncHHt\n5XrdhdxjHcMqRc3RaQnaSbaERTNiWJYyOzI5FpO048V62v/jjaD3ikwaHcKx\nDVAlMJI9Tk11PklhZBwE7F0mQ9VzC4+h/DFvTMqgPeWvX/fOOTgk+Gy92UYX\nU7kcb7/qGJQBNF0XrvrEdPFQg70CJOxv2qZedw0z4af34ArNXiuX0c0FP+ji\n9T2yEuRpdxaRjB4+NXKrYNw8p2gz9CtVsgPpoFRYIa3+HRuLVGHq/0t3rJo8\nb2hok8WyjEdn/5aECRYN1MLVuWSB8XlDRwAYlTLFOY1fgmduGGRDMOnXpVMF\nOW7r19nYkM/hIIu5y9/yzZGzVEHgW803ioF+7UBpf5bBk4GNg2zpRfzfClj8\n+AAw5XL1F9/iqsyn5p4j7zci9wcubQJ2xU3mgnz+JtBMMll37AiKFu+ZinLy\n7hBswYQir63csZa7x//8j9INrfjPo5tXLmbD1W81sFxaYLAmLsQfvHyfgo5l\nESIfqgJ9dR+pHOMGXs2lcFMcB4bxSMRMG0Q4HEoEEm65VtiUWHJcUHheYdJQ\nQgSxjlwXlFQj9/Af+DK1WdNp3RLlAp4B3R8ggx3UD50uMq9+rYD1BwnaWlbf\nL2p8\r\n=2sqP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICqTXLDQwdAdC5/gZcXJeWqopZ7ZnFA1yCoS/Atio5O5AiEAycROsLIZrUdVdF58CVXEeuNHZXey7Y7SFZCnQRp3OQ4="}]},"maintainers":[{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"}],"_npmUser":{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-change-highlight_1.3.0_1580340674565_0.77026596118614"},"_hasShrinkwrap":false},"1.3.0-alpha":{"name":"react-change-highlight","version":"1.3.0-alpha","description":"React component to highlight the changed content immediately and bring focus of the user into the changed part","keywords":["ux","react","react-highlight","react-change","highlight","change-highlight"],"author":{"name":"Medhat Dawoud","email":"medhatdawoud@gmail.com"},"license":"ISC","repository":{"type":"git","url":"https://github.com/medhatdawoud/react-change-highlight","directory":"packages/react-change-highlight"},"main":"build/index.js","scripts":{"build":"rollup -c","postbuild":"npm pack && tar -xvzf *.tgz && rm -rf package *.tgz","prepublishOnly":"rm -rf build && npm run build","release":"np"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8"},"_id":"react-change-highlight@1.3.0-alpha","dist":{"shasum":"54485d36e2d1fdb26ac253cb17371364915723f4","integrity":"sha512-67zTXVC+fv3K4LbEGdqH0GZKu73LFoQF4tgtWTwCuA2HB6WEqTAkZlWawxJMK4FRtw+DCod977EKUp72ubxfog==","tarball":"https://registry.npmjs.org/react-change-highlight/-/react-change-highlight-1.3.0-alpha.tgz","fileCount":27,"unpackedSize":26811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMheZCRA9TVsSAnZWagAArYUQAI+0wglRwEtOPn+QCt9b\nLoO0HRPH6ESSXjGTHk70LoeMPjptWOw7HelVECJQFSRrBMOH5+Zk9q3tFj8p\nFVlY0xUdQQFL3Phj/T4HSVjNP3OdibD4ebSiHmtSUow2dO8LRMhRu04ReuC4\nxOHKKKixlXtsk4GwZXoUWgfvAvjTaPWw2Pjeia2FGRnBJf3RdQV65CYPwbgC\nHX4dx4AKuVzmeyDIxndiyOpMNOrtjl0WR2356KvDdNe6HRt09R8xJ//LTOLQ\ncRcKTMR1pFu0UW0ubzLaxDCpUnXrO1q6NMSGImaiMgS4/FsAjYgb2Kb1iaqF\nXFwA4g45sMLczTxQ9RwikfkFnndD3hy0HUAuHDZzDbge2zESzp/MIGygOJSG\nxU6TcZufvB8UR7+EU+E3YmZO0VDjzvLbxYPiNzOS3ZbrmAsfdrn/Fq8XSRBm\nUNbgAT3GWlVL+DxGSJDfCqVMhO8htCt82B1l2dvKZX0z05e/sRVA7VoG1hW8\nluB6e1GXFjfFL85NB4UKDURtQxpS8BqSF5fogara9SGgkda2R1vAoQzeXUmo\nrHG/A/i1/ZOwqa6s79rtB+iNXNSgo8PBrZDQpuk0S+2Q74wfaPCmYSU1qEsA\nX0K+phs0aYJqkFpaK0hKWslxXbAXXNRXV1ValChj02FcQXJCbxLvmTIcY1cy\nZa88\r\n=cTt9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCvYfJRTD2yCFq8MCdwmhmG3/I7iHJn6gg4mDvuM1pQSwIgDwa5k2bkcAqFODreJWtruneiwP09FupnUuyMhUoDf2Y="}]},"maintainers":[{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"}],"_npmUser":{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-change-highlight_1.3.0-alpha_1580341145046_0.8047897685238454"},"_hasShrinkwrap":false},"1.3.0-delta":{"name":"react-change-highlight","version":"1.3.0-delta","description":"React component to highlight the changed content immediately and bring focus of the user into the changed part","keywords":["ux","react","react-highlight","react-change","highlight","change-highlight"],"author":{"name":"Medhat Dawoud","email":"medhatdawoud@gmail.com"},"license":"ISC","repository":{"type":"git","url":"https://github.com/medhatdawoud/react-change-highlight","directory":"packages/react-change-highlight"},"main":"build/index.js","scripts":{"build":"rollup -c","postbuild":"npm pack && tar -xvzf *.tgz && rm -rf package *.tgz","prepublishOnly":"rm -rf build && npm run build","release":"np"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8"},"_id":"react-change-highlight@1.3.0-delta","dist":{"shasum":"ccc6650ef5e81b5832074c5dca8337cfc1881b58","integrity":"sha512-PvEU3f+kVQiEgeEQIb+S0TcYAO20ww+kTPQbO3Cbhj1iir4MnaYcBBVGT9Vs914cHP1slbmgno7J0h/o4teOAw==","tarball":"https://registry.npmjs.org/react-change-highlight/-/react-change-highlight-1.3.0-delta.tgz","fileCount":26,"unpackedSize":21151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMhj8CRA9TVsSAnZWagAAVhoP/2lMO+KtB9pacIvRBqsV\nWZKMwubNXLqGHICYQfzXhtXnBaZBgFHBViLjSJIsEhWDKmWQvKxiZttgl4e1\n+dpATMHLyDYpU5l6H651R04305h/vj2eDuBqzBNA5zV5JBRTnTDKIesU2Dqx\njLvCb0L6bViSVEMU8/0IP/n+U+YnBkWBer7NgWkg1PNKyfFuRPDVwa0BaS1k\nAoI0JmqVxb+l3tqY/VW78fyRUzt4ibBYQg0H1jhEnQ19Ry0bYwbn6DDVyc52\nvRKhdiI04j/Au9Jo1GLXjPMPLd5dTXKHXwUf4PF+XRZkzHUxl11oPaTS5Snk\nixbKYfUXnUIqNyYohMtKHWI1wUiD4vBGp1JUkiEcSHfuXGdJ71P2EFHDvWHi\nBQjBnWHw5+o2AlY2NMv+w+Cx3OGtfQ2wZfD//ZcU5Jq4VcrHm5X6zhVSru9G\n94HMjBIluSjgFPY1rfBhROItGgiJ3jrhGkyPW7djgN+ylo5OgBGHMD3XVif3\nBY1xrFCyDJw/ihm4ZZHT+aEMO3mAYXN+TIXkBbLbmllunf10W7cUPL+YVJOS\n0ucO+VFKoYgc+vD8It8VDuzW4kWg/TSkJyOrEgOE3qJS03+3FQ79XFpPHex+\nUmGQX+VXOn221JbnERcCgxg1N2GatVATP5Kni2rJmLvvneiSyJ4hmhORsgdz\nutPE\r\n=kxM3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDcinUclr15JHE/tdhjrjwGeh8McOW7v5Z5XjG9M+SPzAIhAJuUGDKJltgtkf8iLuC3k/qI6TsK+9LSKnbJ2kSAc4vm"}]},"maintainers":[{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"}],"_npmUser":{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-change-highlight_1.3.0-delta_1580341500242_0.33263043961912464"},"_hasShrinkwrap":false},"1.3.0-latest":{"name":"react-change-highlight","version":"1.3.0-latest","description":"React component to highlight the changed content immediately and bring focus of the user into the changed part","keywords":["ux","react","react-highlight","react-change","highlight","change-highlight"],"author":{"name":"Medhat Dawoud","email":"medhatdawoud@gmail.com"},"license":"ISC","repository":{"type":"git","url":"https://github.com/medhatdawoud/react-change-highlight","directory":"packages/react-change-highlight"},"main":"build/index.js","scripts":{"build":"rollup -c","postbuild":"npm pack && tar -xvzf *.tgz && rm -rf package *.tgz && cp ../../README.md build/README.md"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8"},"_id":"react-change-highlight@1.3.0-latest","dist":{"shasum":"1fc5a95cd892d81ae1d7fb336daf48fa0fb0f5d6","integrity":"sha512-MyI6kB712vIi5AbDo8S1QJcl7Bxd5BOUpxWNF5/o9ba8GbiMW8sGVMNm99FQUtgMMmoHUURCW1w4BjNPSCdGeg==","tarball":"https://registry.npmjs.org/react-change-highlight/-/react-change-highlight-1.3.0-latest.tgz","fileCount":26,"unpackedSize":21114,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMho9CRA9TVsSAnZWagAArD0P/R2vKJKivLKzfca+WrTE\nwz1ZbQntgEL8ft3Iv2x9QeeTWFc+/un+8eo1j8aiePpxhMlJbkwvWhjiq9hh\nN5U80eETqHaZuuyjoI39yoc/TqY82kftJGqhbcXejf+1P3MioS2L/Me1kjzT\nRs2Qhod8n2I2aHEMyN9PznwsuoIDp7kwXUuiaq0O6CESgzWo2LQI3Yjx1kQP\n6Uk2fawFr0qK17PuPmZihZBMw9RLFpOw1gdyWDmNdyR4TvUsZ6YPSlVMVU7f\n5hm93NZ9VYCFji/pbJw0bN0sSkIMi8cekpiEpfy/OR9GGhznoKfTDI+PaXs0\nrBVG0SsZLlylg57+C4LPUgIYcc23btE8KsUXb+lyWF/7new96mUUNRJCI0cF\n0RxBBvGnTSLv+p78LT2VDdmayrx9HEP0WsoaWb4qtw4keY/P+Ggd2UNKblCr\nF/h/q7lHsqx025aDfP5p7LAg4u66wBTD2t7q1plN0R7fFN60brWW+6v2M+LI\nWJ3ePAoTtkg5kqOY0yj9Mt6a+MGZ5HUV384AyQUwErRHgBECQZEm3C1rHBCg\nqyBAmoLshSCOVxPkIUUSgqfTRQ4m72W9dETz0ySpW4WpUaztWaQpbx5RuBxp\n6OSuOjTN4rUtdLAaZY/1LD2jsbysh/D5sMTRkuqN871AAcYXiC1ymNdjzAOt\nUe5c\r\n=Kpm5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCvqAt+qU0rPxmmHxUXOXjKFvSt5eN1kiE9KS0vULelXwIhAKnITcRtYJ9uBu8qmh3b0GH7q/Bp/+cSItow5H7l5qG4"}]},"maintainers":[{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"}],"_npmUser":{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-change-highlight_1.3.0-latest_1580341820674_0.18605754790692997"},"_hasShrinkwrap":false},"1.3.0-testing-publish":{"name":"react-change-highlight","version":"1.3.0-testing-publish","description":"React component to highlight the changed content immediately and bring focus of the user into the changed part","keywords":["ux","react","react-highlight","react-change","highlight","change-highlight"],"author":{"name":"Medhat Dawoud","email":"medhatdawoud@gmail.com"},"license":"ISC","repository":{"type":"git","url":"https://github.com/medhatdawoud/react-change-highlight","directory":"packages/react-change-highlight"},"main":"build/index.js","scripts":{"build":"rollup -c","prebuild":"cp ../../README.md README.md","postbuild":"npm pack && tar -xvzf *.tgz && rm -rf package *.tgz"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8"},"_id":"react-change-highlight@1.3.0-testing-publish","dist":{"shasum":"f00e02a0f17cb590d6b7aed20045b76bf93b1e9a","integrity":"sha512-amiXI907dzNAMFezbodHIn9u48hOvcE4FMMgYUfDGehPS30ZIJAEDayuH+5q/6yBAUyAt1haMHw85+zON91Mwg==","tarball":"https://registry.npmjs.org/react-change-highlight/-/react-change-highlight-1.3.0-testing-publish.tgz","fileCount":28,"unpackedSize":32453,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMhq6CRA9TVsSAnZWagAAargP/iEpR6CbNUx5SfhCJftG\n5WuvcujwvF0t0roPbQk2cAYmvxWHMXqqSN5N7cAxm0UAun2b13Pj8kTI/C5Z\n9qs/DwzGqlgzYGAvv86/UZ40k6kMxhi/SmxeQgOecnWhOn/r8yghhJQxs1Id\nZveBNFOnWva7ZqZC1Q7/57xkNSSFWPIDzxUYoBdUvc0cw/AwzM1g20oAeFlE\nEySBbeh+7wkWD164g/BtwpSVYm/B09v/cMz844cBvfPqNvlRSxsDqFlYCGNe\nU4IbMGTS3PmBYLCxZb2wQhflUbAdNlvkcmVjHuNX+LOrLyN01uL5NCdH0v+i\n0748wOSk9MfQiX7Ae4RZ0hQzgzPIcf2nX1r6qaXZXzCEMJhXOHL+XXvsunHL\nV+knWWjN0NLlF6IFCVnWs6K58sBQNCqPlATv0eo+dE2l065eASbP+/3fcr5H\niu0h59Bi+gchki12Xn2KW3J+qV8By1xOfyq45yPM2hM3KCi1Y5+2xjvLnYrJ\nrEjz9lVydjFoLDz1gWVSPTRwW/IAhMGMbW3G4NidXr8+gQstdhZutbD3ZNZ5\nlSvqcN1lpcAJDWiWnmY/+v0X7vzPbHLHUoQM8/WWgWULV2yJNX1VN1ftnoUu\nsq7pqQfY+sniUHc13jq9y51CI0TC3SBiOpjRN8+tyUuYwD+RTl1ivro+CYlr\nIxLr\r\n=SdtD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHMlulrr1Nj1zGgV04qUZkQdTzUNsvxNi5z6LwT5GzorAiEAwSS8UNoKO11R590y16u7dwrNZaIIC6qXgGqyyuNlzPk="}]},"maintainers":[{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"}],"_npmUser":{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-change-highlight_1.3.0-testing-publish_1580341946525_0.9394014065426546"},"_hasShrinkwrap":false},"1.3.1":{"name":"react-change-highlight","version":"1.3.1","description":"React component to highlight the changed content immediately and bring focus of the user into the changed part","keywords":["ux","react","react-highlight","react-change","highlight","change-highlight"],"author":{"name":"Medhat Dawoud","email":"medhatdawoud@gmail.com"},"license":"ISC","repository":{"type":"git","url":"https://github.com/medhatdawoud/react-change-highlight","directory":"packages/react-change-highlight"},"main":"build/index.js","scripts":{"build":"rollup -c","prebuild":"cp ../../README.md README.md","postbuild":"npm pack && tar -xvzf *.tgz && rm -rf package *.tgz"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8"},"_id":"react-change-highlight@1.3.1","dist":{"shasum":"ab8a06bfe5d8f18c6956d68788fdc6f99714a470","integrity":"sha512-H/S4NRbuQ3Qtw4Gw3EpDAlQJwfmk6B7P3PzWv+gQo8EX4wWUYE2dcv++0lyhsMysuc/v/H9MMk3XrqofRWFzCQ==","tarball":"https://registry.npmjs.org/react-change-highlight/-/react-change-highlight-1.3.1.tgz","fileCount":28,"unpackedSize":32437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMhtGCRA9TVsSAnZWagAAGt4P/0KI3C2R0ViK6ID5+YM4\nX2PUaA5mE9lM/hg4r5taYG/G3GNKpwixpNxajD2WomX3yTBuIEbMMCiy8xem\n8RVAuid1H0y0l6hcMLhN+CDE+fOrkVGZ+tuuNcYMAOE5eq6GjGr+7iE58Ddl\nZQYZYNp/M/tEGzhgVjAig7AYRgbHu23gUryFo3UJWn3qeSJS4HD7ekGK3Plw\nBezYLqbr/aVrZxREw917Et6dpUzskbtybG9I0Ilm/Kmzs9oRamSggftiopU9\nkzEgIHIa0tFZD/04OruaqUXg62jLLPu9xa4caPG5iNTlFyS5t5AHIW07VZ0I\nLwHWQQJ/vzqnYXPjIG1rDuM9wKsMWQXhav7LzgOssv394oclSONPtnQRodJw\nVKdI0j3c1yuUf8gVDPdtlSCk/6nx8P6sqM4mNHzjQz2jMF0ctFWv5rxy+Rim\nrAA+qQb/wIDsJ3BiUfR4W0n2ds+B+a8Uqty77/uto+3RoTPOdMUhikK1ZkLF\nKAnXvFGaRiNnecTm/kgfIapPiTv5d1SDUEC9eRU9yPQW8vdFpTtPdFvqC5CJ\nNCxJ9KVTg/ZNN+B/+HvMsD+a8VdUhwZSJdJ2Wzc4VH0bjqanvnhPqILcvY9j\nlZ3lwUQ43oQYUzL4cLgVH0YFgLqTQGW0PbJNWOTne4nGqYBznzO2i++EomcJ\nQ64A\r\n=3rr4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF2OZXzV3a1vA/1gBY1eP6/YG3PnZ5xAoxSWxsZVGhcMAiAwukZchUjfe08EsUIo0iagwmvMr/PXO91P7DSQlE791g=="}]},"maintainers":[{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"}],"_npmUser":{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-change-highlight_1.3.1_1580342086279_0.03591557175678717"},"_hasShrinkwrap":false}},"time":{"created":"2019-09-29T18:40:09.646Z","0.1.0":"2019-09-29T18:40:09.776Z","modified":"2022-05-14T07:36:54.167Z","0.1.1":"2019-09-29T18:48:01.058Z","0.1.2":"2019-09-29T19:17:58.633Z","0.1.3":"2019-09-29T22:01:15.377Z","1.0.0":"2019-09-30T23:46:49.527Z","1.0.1":"2019-10-01T21:43:59.588Z","1.0.2":"2019-10-01T22:22:14.950Z","1.0.3":"2019-10-01T22:27:57.030Z","1.0.4-0":"2019-10-01T23:11:47.467Z","1.0.4-1":"2019-10-01T23:33:44.000Z","1.0.4":"2019-10-02T00:10:49.522Z","1.0.5":"2019-10-02T00:14:29.533Z","1.0.6":"2019-10-02T00:27:42.326Z","1.0.7-0":"2019-10-02T00:30:38.453Z","1.0.7-1":"2019-10-02T00:35:55.934Z","1.0.7-2":"2019-10-02T15:10:43.011Z","1.0.7-3":"2019-10-03T19:13:23.182Z","1.0.7-4":"2019-10-03T19:23:09.742Z","1.1.0":"2019-10-03T20:54:37.108Z","1.1.1":"2019-10-03T22:44:15.109Z","1.1.2":"2019-10-03T23:06:17.590Z","1.1.3-0":"2019-10-03T23:14:47.598Z","1.1.3-1":"2019-10-23T21:19:04.115Z","1.1.3-2":"2019-11-04T23:33:45.989Z","1.1.3":"2019-11-06T01:21:20.332Z","1.2.0-0":"2019-11-07T01:20:53.153Z","1.2.0":"2019-11-08T21:33:46.982Z","1.2.1-0":"2019-11-08T21:51:58.391Z","1.2.1":"2019-11-12T23:28:20.582Z","1.2.2":"2019-11-20T21:54:40.830Z","1.2.3-0":"2019-11-20T22:13:29.499Z","1.2.3-1":"2019-11-20T22:18:09.996Z","1.2.3-2":"2019-11-20T22:22:40.648Z","1.2.3":"2019-11-20T22:27:50.675Z","1.3.0":"2020-01-29T23:31:14.724Z","1.3.0-alpha":"2020-01-29T23:39:05.254Z","1.3.0-delta":"2020-01-29T23:45:00.340Z","1.3.0-latest":"2020-01-29T23:50:20.803Z","1.3.0-testing-publish":"2020-01-29T23:52:26.688Z","1.3.1":"2020-01-29T23:54:46.377Z"},"maintainers":[{"name":"medhatdawoud","email":"medhatdawoud@gmail.com"}],"description":"React component to highlight the changed content immediately and bring focus of the user into the changed part","author":{"name":"Medhat Dawoud","email":"medhatdawoud@gmail.com"},"readme":"# react-change-highlight\n\n[![All Contributors](https://img.shields.io/badge/all_contributors-3-orange.svg)](#contributors)\n[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/medhatdawoud/react-change-highlight/blob/master/LICENSE) \n[![npm version](https://img.shields.io/npm/v/react-change-highlight.svg?style=flat)](https://www.npmjs.com/package/react-change-highlight)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/medhatdawoud/react-change-highlight/blob/master/CONTRIBUTING.md)\n\n> React Change Highlight is a react component to highlight changes in the wrapped component to enhance the UX and grab the focus of the user into the changed value of some parts like the cart in an e-commerce application for example.\n\nThis is a real use case I'm using in a project\n![UseCase](https://i.imgur.com/vHxyHrN.gif)\n\nYou can play around with it on this sandbox [codesandbox.io/react-change-highlight](https://codesandbox.io/s/react-change-highlight-example-fcwh9) .. or clone the repo and play around with the all examples in the examples folder\n\n## Install\n\n```\nyarn add react-change-highlight\n```\n\nor\n\n```\nnpm install react-change-highlight\n```\n\n## Usage\n\nBasically you need to wrap the components you want to highlight on change inside `ChangeHighlight` element (default import) then add `ref` attribute to each child in this component which you want to highlight when they got their content changed.\n\nIn the following example the `count` variable comes from state, so when ever that function `setCount()` is called with any different value the background of that wrapped div will be changed as a default action, but actually it can be any kind of animation you make into the class you will pass to `highlightStyle` attribute.\n\n```jsx\nimport ChangeHighlight from \"react-change-highlight\";\n\nexport default () => {\n const [count, setCount] = useState(0);\n\n return (\n \n
{count}
\n \n );\n};\n```\n\nDefault styling for highlighting in case the user didn't use a custom styling using the `highlightStyle` property is `rc-highlight` class and it is as follow:\n\n```css\n.rc-highlight {\n background-color: #f8ffb4;\n transition: all 0.5s ease-in-out;\n}\n```\n\n## SSR (server-side rendering)\n\nIn case of using this module in a server-side rendering app, you should make sure to create and pass your own className to the `highlightStyle` attribute, and to make some hint for you, add `ssr` attribute to the `ChangeHighlight` element, so it can give you a hint to add a class in your console as a warning like this.\n\n```text\nāš ļø \"react-change-highlight\", As you're using server-side rendering, it's a must to create and pass your css class to the highlightStyle attribute for \"ChangeHighlight\" component\n```\n\n## Props\n\n| Property | Type | Default | Descriptio|\n| -------------------- | ------- | ------- | --------------------------------------------------------- |\n| `showAfter` | number | 500 | number of milli seconds before start highlighting|\n| `hideAfter` | number | 2500 | number of milli seconds before ending highlighting|\n| `mode` | change or newOnly |`change`| mode of the detection, either `change` which is the default one to detect the changes in the parsed elements or `newOnly` which is useful in case of newly added element highlight (check todo example) |\n| `disabled` | boolean | false | whether you need to disable highlighting |\n| `ssr` | boolean | false | you need to pass this in case of using it with server-side rendering. (gives a hint for adding style) |\n| `highlightClassName` | string | | className for highlighing content (a must in case of SSR)|\n| `containerClassName` | string | | className for component container |\n\n---\n\n## Contributors āœØ\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n \n \n \n \n \n
\"Medhat
Medhat Dawoud
šŸ’» šŸ“ šŸ“–		\"Islam
Islam ElHakmi
šŸ’»		\"Mohamed
Mohamed Gamal
šŸ› šŸ’»
\n\n\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","license":"ISC","keywords":["ux","react","react-highlight","react-change","highlight","change-highlight"],"repository":{"type":"git","url":"https://github.com/medhatdawoud/react-change-highlight","directory":"packages/react-change-highlight"}}