{"_id":"@asurraa/sura-ui-react-reveal","_rev":"4-0a112d3a75fe52a831e857b85b4ab0db","name":"@asurraa/sura-ui-react-reveal","dist-tags":{"latest":"1.3.2"},"versions":{"1.3.0":{"name":"@asurraa/sura-ui-react-reveal","version":"1.3.0","author":{"name":"Roman Nosov","email":"rnosov@gmail.com"},"description":"Really simple way to add reveal on scroll animation to your React app.","license":"MIT","keywords":["react","reveal","reactreveal","scroll"],"repository":{"type":"git","url":"https://github.com/asurraa-lab/react-reveal"},"bugs":{"url":"https://github.com/asurraa-lab/react-reveal/issues"},"homepage":"https://www.react-reveal.com/","main":"dist/index.js","source":"src/index.jsx","dependencies":{"copyfiles":"^2.4.1","prop-types":"^15.5.10"},"peerDependencies":{"react":"^15.3.0 || ^16.0.0"},"devDependencies":{"@types/node":"^16.10.2","babel-cli":"^6.14.0","babel-core":"^6.11.4","babel-jest":"^15.0.0","babel-plugin-add-module-exports":"^0.2.1","babel-plugin-react-transform":"^2.0.2","babel-plugin-transform-runtime":"^6.12.0","babel-preset-es2015":"^6.9.0","babel-preset-react":"^6.5.0","babel-preset-stage-0":"^6.5.0","enzyme":"^3.1.0","enzyme-adapter-react-16":"^1.1.1","gulp":"^3.9.1","gulp-babel":"^6.1.2","gulp-clean":"^0.3.2","gulp-flatten":"^0.3.1","gulp-replace":"^0.6.1","gulp-uglify":"^2.0.0","jest":"^22.1.4","jest-cli":"^22.4.3","react":"^16.2.0","react-dom":"^16.2.0","react-test-renderer":"^16.2.0","rimraf":"^3.0.2","typescript":"^4.4.3","uglify-js":"^2.7.3"},"scripts":{"prebuild":"rimraf dist","build":"tsc --build tsconfig.json && copyfiles -u 1 src/index.d.ts dist/","prepublish":"yarn build","test":"jest ."},"licenseText":"The MIT License (MIT)\n\nCopyright (c) 2016-2018 Roman Nosov\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\n","_id":"@asurraa/sura-ui-react-reveal@1.3.0","dist":{"shasum":"c90cfa4cbe01384eb3a76e2d744e06171c76a2ec","integrity":"sha512-J0nBPqJhH08c/VEvDw8X1XsXQaxFiVjnzxUxx2rTx8OYCh1reYmpeEOO1pHr+MQDl4jzyzzcrwqG+17ziIsQeA==","tarball":"https://registry.npmjs.org/@asurraa/sura-ui-react-reveal/-/sura-ui-react-reveal-1.3.0.tgz","fileCount":121,"unpackedSize":268777,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC3sJq6fSXcjPCqRhxL3vwmcFNVmyvozx/wjbyhuTnyZQIgWCYH8DlDKjxEeU3E5ViksPb+kfc57EmQ+Y4tC5wdM1U="}]},"_npmUser":{"name":"lyhourchhen","email":"chhenlyhour@gmail.com"},"directories":{},"maintainers":[{"name":"vichea","email":"vicheanorm@gmail.com"},{"name":"themkimhong","email":"themkimhong2@gmail.com"},{"name":"lyhourchhen","email":"chhenlyhour@gmail.com"},{"name":"duongkimseng","email":"duong.kim.seng@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/sura-ui-react-reveal_1.3.0_1632983836441_0.4517641749597654"},"_hasShrinkwrap":false},"1.3.1":{"name":"@asurraa/sura-ui-react-reveal","version":"1.3.1","author":{"name":"Roman Nosov","email":"rnosov@gmail.com"},"description":"Really simple way to add reveal on scroll animation to your React app.","license":"MIT","keywords":["react","reveal","reactreveal","scroll"],"repository":{"type":"git","url":"https://github.com/asurraa-lab/react-reveal"},"bugs":{"url":"https://github.com/asurraa-lab/react-reveal/issues"},"homepage":"https://www.react-reveal.com/","main":"dist/index.js","source":"src/index.jsx","dependencies":{"copyfiles":"^2.4.1","prop-types":"^15.5.10"},"peerDependencies":{"react":"^15.3.0 || ^16.0.0"},"devDependencies":{"@types/node":"^16.10.2","babel-cli":"^6.14.0","babel-core":"^6.11.4","babel-jest":"^15.0.0","babel-plugin-add-module-exports":"^0.2.1","babel-plugin-react-transform":"^2.0.2","babel-plugin-transform-runtime":"^6.12.0","babel-preset-es2015":"^6.9.0","babel-preset-react":"^6.5.0","babel-preset-stage-0":"^6.5.0","enzyme":"^3.1.0","enzyme-adapter-react-16":"^1.1.1","gulp":"^3.9.1","gulp-babel":"^6.1.2","gulp-clean":"^0.3.2","gulp-flatten":"^0.3.1","gulp-replace":"^0.6.1","gulp-uglify":"^2.0.0","jest":"^22.1.4","jest-cli":"^22.4.3","react":"^16.2.0","react-dom":"^16.2.0","react-test-renderer":"^16.2.0","rimraf":"^3.0.2","typescript":"^4.4.3","uglify-js":"^2.7.3"},"scripts":{"prebuild":"rimraf dist","build":"tsc --build tsconfig.json && copyfiles -u 1 src/index.d.ts dist/","prepublish":"yarn build","test":"jest ."},"licenseText":"The MIT License (MIT)\n\nCopyright (c) 2016-2018 Roman Nosov\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\n","_id":"@asurraa/sura-ui-react-reveal@1.3.1","dist":{"shasum":"3246686d4cf21e8c4d82f1107a97525931792e48","integrity":"sha512-7hSVBaDRfy2c3YeSV8o2gyGaCU1jEeshe0o9JxjxcRkwhlFMI5Qn7rwY1w5CGY/xNMFXgCtQAHMssUmh9RCpNw==","tarball":"https://registry.npmjs.org/@asurraa/sura-ui-react-reveal/-/sura-ui-react-reveal-1.3.1.tgz","fileCount":79,"unpackedSize":179050,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIQC/MgA9hUoiyO8e9C9E6cnIe44kacUvtlKFM8OQwNL/6AIfY06D/ztQuFMSTqxYqFamtFxdtbw9ezJI0nsMyZb1lw=="}]},"_npmUser":{"name":"lyhourchhen","email":"chhenlyhour@gmail.com"},"directories":{},"maintainers":[{"name":"vichea","email":"vicheanorm@gmail.com"},{"name":"themkimhong","email":"themkimhong2@gmail.com"},{"name":"lyhourchhen","email":"chhenlyhour@gmail.com"},{"name":"duongkimseng","email":"duong.kim.seng@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/sura-ui-react-reveal_1.3.1_1632984351848_0.8389728579224041"},"_hasShrinkwrap":false},"1.3.2":{"name":"@asurraa/sura-ui-react-reveal","version":"1.3.2","author":{"name":"Roman Nosov","email":"rnosov@gmail.com"},"description":"Really simple way to add reveal on scroll animation to your React app.","license":"MIT","keywords":["react","reveal","reactreveal","scroll"],"repository":{"type":"git","url":"https://github.com/asurraa-lab/react-reveal"},"bugs":{"url":"https://github.com/asurraa-lab/react-reveal/issues"},"homepage":"https://www.react-reveal.com/","main":"dist/index.js","source":"src/index.jsx","dependencies":{"copyfiles":"^2.4.1","prop-types":"^15.5.10"},"peerDependencies":{"react":"^15.3.0 || ^16.0.0"},"devDependencies":{"@types/node":"^16.10.2","babel-cli":"^6.14.0","babel-core":"^6.11.4","babel-jest":"^15.0.0","babel-plugin-add-module-exports":"^0.2.1","babel-plugin-react-transform":"^2.0.2","babel-plugin-transform-runtime":"^6.12.0","babel-preset-es2015":"^6.9.0","babel-preset-react":"^6.5.0","babel-preset-stage-0":"^6.5.0","enzyme":"^3.1.0","enzyme-adapter-react-16":"^1.1.1","gulp":"^3.9.1","gulp-babel":"^6.1.2","gulp-clean":"^0.3.2","gulp-flatten":"^0.3.1","gulp-replace":"^0.6.1","gulp-uglify":"^2.0.0","jest":"^22.1.4","jest-cli":"^22.4.3","react":"^16.2.0","react-dom":"^16.2.0","react-test-renderer":"^16.2.0","rimraf":"^3.0.2","typescript":"^4.4.3","uglify-js":"^2.7.3"},"scripts":{"prebuild":"rimraf dist","build":"tsc --build tsconfig.json && copyfiles -u 1 src/Reveal.d.ts dist/","prepublish":"yarn build","test":"jest ."},"licenseText":"The MIT License (MIT)\n\nCopyright (c) 2016-2018 Roman Nosov\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\n","_id":"@asurraa/sura-ui-react-reveal@1.3.2","dist":{"shasum":"63b764dcad8e394c235a94965384877f524a08f0","integrity":"sha512-Z3WhDL0XeUo5WxJlZ3+i55FliiMm3nt5RMTJ6cR2KoWl0l0nwONiKOcHDIPNXM9F9p6AVOJIo94zkDvbV+FTig==","tarball":"https://registry.npmjs.org/@asurraa/sura-ui-react-reveal/-/sura-ui-react-reveal-1.3.2.tgz","fileCount":79,"unpackedSize":179053,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhzGaNCRA9TVsSAnZWagAA/80P+wb7j7MyfUofzPgne4WH\naj81At7JmCGpUTqfPk4jzsqN2K361jBLfTLqIaf7Ou71fneGesbAuXQr9JCi\nNCSJzLVBXym+NHHfI1AVTcHV9ppLgDCJCv0MKKMvL8UaN3VRIhqVLN03fLp8\nkccxBM3V101PsTjUNvgjeOep2cjDosKe3LnfG4Uc43VFAni2FpDsOXI0rlyV\nTIsishlLQpTWex1wJIoUiPo+5IGndqG4s8bDjKrGML1vRgHJD/J87jzf/tQZ\nAdYQEmXVgE+hR43+ex2aEDxk9GyoXEPQ7ue/QTlWUvR57Z6eLkEt8L5OhijX\ney0d/SnB+/epRFA6tupITmYgGfr7J/Pdnp2yPa7Yq/ejD+QZGbQUcm5HTB1g\nqj8WlLvJU7N/23PTN+0ffBwvAIPXQeXO8WeW37v8SaAXNJjtzVls3JOpcZS5\ngO3Wy8DTlzK6cuQrIQ2eFDVmbm67L7oMlBlHTAMYRg0R0W6yJgkKrVlwOZbE\nIGxAjP7e/oeIOxB2elIRcU969JZbuuYb84a9Fakzz++HguCImGfJW8ElIQHx\nONZSFRputgQHmWu/dPJ3CUoGUiDw/03jMMrzdwbEql1BXtHzL2rESw/RLk6b\noaFQakOwz8uaiyAsnebth3uaHNp/pA366CvmgICN44A8guwJTaZGTpyGVxIk\nhU3A\r\n=OmBo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD58KpBR+E8Y1KnK6fcgmonSO07gmn4yTAJd1iNOAdsIgIgUISd/lqmMY/VZ/likTmcaQ8Xk/EnTy0VJsodg6sUeXA="}]},"_npmUser":{"name":"lyhourchhen","email":"chhenlyhour@gmail.com"},"directories":{},"maintainers":[{"name":"vichea","email":"vicheanorm@gmail.com"},{"name":"themkimhong","email":"themkimhong2@gmail.com"},{"name":"lyhourchhen","email":"chhenlyhour@gmail.com"},{"name":"duongkimseng","email":"duong.kim.seng@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/sura-ui-react-reveal_1.3.2_1632985070983_0.996522036654649"},"_hasShrinkwrap":false}},"time":{"created":"2021-09-30T06:37:16.378Z","1.3.0":"2021-09-30T06:37:16.631Z","modified":"2022-04-04T16:00:28.307Z","1.3.1":"2021-09-30T06:45:51.995Z","1.3.2":"2021-09-30T06:57:51.149Z"},"maintainers":[{"name":"vichea","email":"vicheanorm@gmail.com"},{"name":"themkimhong","email":"themkimhong2@gmail.com"},{"name":"lyhourchhen","email":"chhenlyhour@gmail.com"},{"name":"duongkimseng","email":"duong.kim.seng@gmail.com"}],"description":"Really simple way to add reveal on scroll animation to your React app.","homepage":"https://www.react-reveal.com/","keywords":["react","reveal","reactreveal","scroll"],"repository":{"type":"git","url":"https://github.com/asurraa-lab/react-reveal"},"author":{"name":"Roman Nosov","email":"rnosov@gmail.com"},"bugs":{"url":"https://github.com/asurraa-lab/react-reveal/issues"},"license":"MIT","readme":"# React Reveal\n\n[React Reveal](https://www.react-reveal.com/) is\nan animation framework for React. It's MIT licensed, has a tiny footprint\nand written specifically for React in ES6. It can be used to create various cool reveal\non scroll animations in your application.\nIf you liked this package, don't forget to star\nthe [Github repository](https://github.com/rnosov/react-reveal).\n\n## Live Examples\n\nA number of simple effect examples:\n\n- [Fade](https://www.react-reveal.com/examples/common/fade/)\n- [Flip](https://www.react-reveal.com/examples/common/flip/)\n- [Rotate](https://www.react-reveal.com/examples/common/rotate/)\n- [Zoom](https://www.react-reveal.com/examples/common/zoom/)\n- [Bounce](https://www.react-reveal.com/examples/common/bounce/)\n- [Roll](https://www.react-reveal.com/examples/common/roll/)\n\nAlso, there are more complicated examples of [animated form errors](https://www.react-reveal.com/examples/advanced/form/) and a [todo app](https://www.react-reveal.com/examples/advanced/todo/).\n\n## Search Engine Visibility\n\n`react-reveal` is regularly checked against googlebot in the Google Search Console to make sure that googlebot can see the content in the revealed elements.\n\n## Full Documentation\n\nFor a full documentation please visit [online docs](https://www.react-reveal.com/docs/).\n\n## Installation\n\nIn the command prompt run:\n\n```sh\nnpm install @asurraa/sura-ui-react-reveal --save\n```\n\nAlternatively you may use `yarn`:\n\n```sh\nyarn add @asurraa/sura-ui-react-reveal\n```\n\n## Quick Start\n\nImport effects from [React Reveal](https://www.npmjs.com/package/react-reveal) to your project. Lets try `Zoom` effect first:\n\n```javascript\nimport Zoom from \"react-reveal/Zoom\";\n```\n\nPlace the following code somewhere in your `render` method:\n\n```jsx\n<Zoom>\n  <p>Markup that will be revealed on scroll</p>\n</Zoom>\n```\n\nYou should see zooming animation that reveals text inside the tag. You can change this text to any JSX you want. If you place this code further down the page you'll see that it'd appear as you scroll down.\n\n## Revealing React Components\n\nYou may just wrap your custom React component with the effect of your choosing like so:\n\n```jsx\n<Zoom>\n  <CustomComponent />\n</Zoom>\n```\n\nIn such case, in the resulting `<CustomComponent />` HTML markup will be wrapped in a `div` tag. If you would rather have a different HTML tag then wrap `<CustomComponent />` in a tag of your choosing:\n\n```jsx\n<Zoom>\n  <section>\n    <CustomComponent />\n  </section>\n</Zoom>\n```\n\nor if you want to customize `div` props:\n\n```jsx\n<Zoom>\n  <div className=\"some-class\">\n    <CustomComponent />\n  </div>\n</Zoom>\n```\n\n## Revealing Images\n\nIf you want to reveal an image you can wrap `img` tag with with the desired `react-reveal` effect:\n\n```jsx\n<Zoom>\n  <img\n    height=\"300\"\n    width=\"400\"\n    src=\"https://source.unsplash.com/random/300x400\"\n  />\n</Zoom>\n```\n\nIt would be a very good idea to specify width and height of any image you wish to reveal.\n\n## Children\n\n`react-reveal` will attach a reveal effect to each child it gets. In other words,\n\n```jsx\n<Zoom>\n  <div>First Child</div>\n  <div>Second Child</div>\n</Zoom>\n```\n\nwill be equivalent to:\n\n```jsx\n<Zoom>\n  <div>First Child</div>\n</Zoom>\n<Zoom>\n  <div>Second Child</div>\n</Zoom>\n```\n\nIf you don't want this to happen, you should wrap multiple children in a `div` tag:\n\n```jsx\n<Zoom>\n  <div>\n    <div>First Child</div>\n    <div>Second Child</div>\n  </div>\n</Zoom>\n```\n\n## Server Side Rendering\n\n`react-reveal` supports server side rendering out of the box. In some cases, when the javascript bundle arrives much later than the HTML&CSS it might cause a flickering. To prevent this `react-reveal` will not apply reveal effects on the initial load.\nAnother option is to apply gentle fadeout effect on the initial render. You can force it on all `react-reveal` elements by placing the following code somewhere near the entry point of your app:\n\n```jsx\nimport config from \"react-reveal/globals\";\n\nconfig({ ssrFadeout: true });\n```\n\nOr you you can do it on a per element basis using `ssrFadeout` prop:\n\n```jsx\n<Zoom ssrFadeout>\n  <h1>Content</h1>\n</Zoom>\n```\n\nOne last option is to use `ssrReveal` prop. If enabled, this option will suppress both flickering and `ssrFadeout` effect. The unfortunate drawback of this option is that the revealed content will appear hidden to Googlebot and to anyone with javascript switched off. So it will makes sense for images and/or headings which are duplicated elsewhere on the page.\n\n## Forking This Package\n\nClone the this repository using the following command:\n\n```sh\ngit clone https://github.com/rnosov/react-reveal.git\n```\n\nIn the cloned directory, you can run following commands:\n\n```sh\nnpm install\n```\n\nInstalls required node modules\n\n```sh\nnpm run build\n```\n\nBuilds the package for production to the `dist` folder\n\n```sh\nnpm test\n```\n\nRuns tests\n\n## License\n\nCopyright © 2018 Roman Nosov. Project source code is licensed under the MIT license.\n","readmeFilename":"README.md"}