{"_id":"@abraj/react-gif-player","_rev":"1-9dbe0c0fcf264b3f0a129baa502b7acd","name":"@abraj/react-gif-player","dist-tags":{"latest":"0.4.3"},"versions":{"0.4.3":{"name":"@abraj/react-gif-player","version":"0.4.3","description":"React component swaps still image with preloaded GIF on click","main":"dist/gifplayer.js","scripts":{"build:clean":"rimraf dist","build:umd":"webpack --progress","build:uglifyjs":"uglifyjs dist/gifplayer.js -o dist/gifplayer.min.js","build:uglifycss":"uglifycss dist/gifplayer.css > dist/gifplayer.min.css","build:uglify":"npm run build:uglifyjs && npm run build:uglifycss","build":"npm run build:clean && npm run build:umd && npm run build:uglify","dev":"rimraf dist && NODE_ENV=development webpack-dev-server","prepublish":"npm run build","test":"echo \"Error: no test specified\" && exit 1"},"keywords":["gif","react","reactjs","image","facebook","player","swap","toggle"],"author":{"name":"Ben Wiley"},"license":"MIT","devDependencies":{"@babel/core":"^7.2.2","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","autoprefixer":"^6.5.1","babel-loader":"^8.0.5","babel-preset-react":"^6.16.0","classnames":"^2.2.5","css-loader":"^2.1.0","mini-css-extract-plugin":"^0.5.0","minimist":"^1.2.0","node-sass":"^4.9.4","opn":"^4.0.2","portfinder":"^1.0.9","postcss-loader":"^3.0.0","react-lifecycles-compat":"^1.0.2","rimraf":"^2.5.4","sass-loader":"^7.1.0","uglify-js":"^3.4.9","uglifycss":"0.0.28","uglifyjs":"^2.4.11","webpack":"^4.29.0","webpack-cli":"^3.2.1","webpack-dev-server":"^3.1.14"},"peerDependencies":{"react":"^15.0.0 || ^16.0.0 || ^17.0.0"},"repository":{"type":"git","url":"git+https://github.com/benwiley4000/react-gif-player.git"},"bugs":{"url":"https://github.com/benwiley4000/react-gif-player/issues"},"homepage":"https://github.com/benwiley4000/react-gif-player#readme","dependencies":{"prop-types":"^15.6.0"},"gitHead":"6a6a25743f948aa5dbd6af77eb958d74a194c36d","_id":"@abraj/react-gif-player@0.4.3","_nodeVersion":"12.22.10","_npmVersion":"6.14.16","dist":{"integrity":"sha512-UXqfCmv+vkmzPSPKG0EcCk16X0x7RuqKRpsP9Qd1syKfJ+gKctuSF1a/dmEc+0rEKVYsGMeO7KdnTGx9VY2ISg==","shasum":"61a3ab83e9c9940ad1a5668e69a7cb5a8c54704c","tarball":"https://registry.npmjs.org/@abraj/react-gif-player/-/react-gif-player-0.4.3.tgz","fileCount":14,"unpackedSize":52223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiIT+jACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqyGQ//ctEQ7lWcm2mtlhRQI0aEyK1exo3l+hRdGq/ncJG+YjPqjKkc\r\nEYwXDN33m5rjxQ4jzUxc0UBOmNWaM1csR/0X7fXxjBtlbciq2aTHuhHFXG9O\r\n+NapNFucgmw6Pw9BYsr3WIOts9ZoNOd8+FQIz+RtFakl2KHMQ/GzHK0hrqYw\r\nicZX0kYNLpaDcll2Ac2SeBdWvrKyZrN/Tbw8Z+yqiUwXa2J0W+IKvanyYtVk\r\nWfehfubrawMtrjkEdRJ9lXgGcmWEu3wdhWOVOjQwuyYWvZ7f7hmQgapSBOcT\r\nVdcQkVdnFxTOA3YE8rPwwXt2pwpcub4oYpl+hOI472lPl56wp+ucw0mw5P4o\r\nDFapye58dSbAX8b/EGLNI0OHzr/waOH0+xfxtIOAHaue9DFdLV4CC5fZuNZR\r\n1fwZhm60cvjGoGRnAuwTnJEmH78UAaRS3TO5iJyE/Xxgybnudm/MnVJlOFrV\r\nfrAkzzolmoR80sXQFssZL0kCWLjIg7fjnwyXGs0bMGdcVx62pPQwxnLbRSK5\r\nwc7W+SK8p7BJ+OqVmU955nfTeUHECqvgWm6CEwgC7YUXzqOSC94i4twq9ErO\r\nw8E6JKogG+bYjepybRj3N4VstumWkXlZLSA79mEIpmrPpMfnob/TA+N5qkbk\r\nc+AVp4mpE9VYvQGm3JuLTbA6gXoLu9MKrDk=\r\n=MssQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDtzIM4IF1+khuC5jkhMxLuXlEzc/FMfIGQZ8GEvKxW2AiB13gEM4ngxvIlvztZifUWofrFKf8BecZcAeNTPBGZ+Ag=="}]},"_npmUser":{"name":"abraj","email":"abhi@raj.me"},"directories":{},"maintainers":[{"name":"abraj","email":"abhi@raj.me"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-gif-player_0.4.3_1646346147526_0.9991963750104589"},"_hasShrinkwrap":false}},"time":{"created":"2022-03-03T22:22:27.474Z","0.4.3":"2022-03-03T22:22:27.668Z","modified":"2022-04-04T11:01:40.807Z"},"maintainers":[{"name":"abraj","email":"abhi@raj.me"}],"description":"React component swaps still image with preloaded GIF on click","homepage":"https://github.com/benwiley4000/react-gif-player#readme","keywords":["gif","react","reactjs","image","facebook","player","swap","toggle"],"repository":{"type":"git","url":"git+https://github.com/benwiley4000/react-gif-player.git"},"author":{"name":"Ben Wiley"},"bugs":{"url":"https://github.com/benwiley4000/react-gif-player/issues"},"license":"MIT","readme":"# react-gif-player\n\n![react-gif-player in action](demo.gif)\n\n### [see a live demo here](https://benwiley4000.github.io/react-gif-player/)\n\nSimilar to Facebook's GIF toggle UI, this React component displays a still image preview by default, and swaps in an animated GIF when clicked. The images are preloaded as soon as the component mounts, or whenever a new source is passed.\n\n*Note:* Unlike Facebook's UI, which uses an HTML video element to preserve playback progress, this component uses the actual GIF and will be reset on each click.\n\n[![NPM](https://nodei.co/npm/react-gif-player.png)](https://npmjs.org/package/react-gif-player)\n\n## install\n\n```\nnpm install react-gif-player react react-dom\n```\n\nIf you're unable to use npm and need production-ready scripts, check out [the releases](https://github.com/benwiley4000/react-gif-player/releases).\n\n## usage\n\n### quick start\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    <!-- gifplayer.css v0.4.2 -->\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/react-gif-player@0.4.2/dist/gifplayer.css\">\n  </head>\n  <body>\n    <div id=\"cat\"></div>\n    <!-- react/react-dom served over CDN -->\n    <script src=\"https://unpkg.com/react@16.3.0-alpha.1/umd/react.development.js\"></script>\n    <script src=\"https://unpkg.com/react@16.3.0-alpha.1/umd/react-dom.development.js\"></script>\n    <!-- gifplayer.js v0.4.2 -->\n    <script src=\"https://unpkg.com/react-gif-player@0.4.2/dist/gifplayer.js\"></script>\n    <script>\n      ReactDOM.render(\n        React.createElement(GifPlayer, {\n          gif: '/img/cat.gif',\n          still: '/img/cat.jpg'\n        }),\n        document.getElementById('cat')\n      );\n    </script>\n  </body>\n</html>\n\n```\n\n### with a module bundler\n\n```javascript\nvar React = require('react');\nvar ReactDOM = require('react-dom');\nvar GifPlayer = require('react-gif-player');\n\n// with JSX\nReactDOM.render(\n  <GifPlayer gif=\"/img/cat.gif\" still=\"/img/cat.jpg\" />,\n  document.getElementById('cat')\n);\n```\n\n### options\n\nOptions can be passed to the `GifPlayer` element as props.\n\n* `gif`: a *string* address to an animated GIF image.\n\n* `still`: a *string* address to a still preview of the GIF (e.g. JPG, PNG, etc.)\n\n* `autoplay`: a *boolean* which can be set `true` if you want to immediately bombard your user with a moving GIF as soon as it's available\n\n* `onTogglePlay`: a *function* which is called whenever the GIF toggles between playing and paused. Receives one argument, `playing`, which is a *boolean*.\n \n* `pauseRef`: a *function* callback is called with another function, `pause` - this can be saved and called later to remotely pause the playing of the GIF, in such cases where that might be desired. For example, you might want to stop the GIF when it scrolls offscreen. The word \"ref\" is used because its usage pattern is similar to [React element refs](https://reactjs.org/docs/refs-and-the-dom.html):\n  ```jsx\n  // here's an example\n  class MyGifWrapper extends React.Component {\n    componentDidMount () {\n      addEventListenerWhenGifFlowsOffscreen(this.pauseGif);\n    }\n \n    render () {\n      return (\n        <GifPlayer\n          gif={src}\n          still={still}\n          pauseRef={pause => this.pauseGif = pause}\n        />\n      );\n    }\n  }\n  ```\n  Still confused? Here's a [jsfiddle](http://jsfiddle.net/1snhzgo8/7/) which shows how to use `pauseRef`.\n \n* Any other attribute available on the HTML `img` tag can be passed as well (excluding `src`, which would be overwritten), though keep in mind React's version of that attribute [may be different than you expect](https://facebook.github.io/react/docs/dom-elements.html#all-supported-html-attributes).\n\n`GifPlayer` expects one or both of the `gif` and `still` props. If one is left out, the other will be used as a fallback.\n\nHowever, if only a `gif` prop is provided, the first frame will be extracted and used as the still preview as soon as the GIF image has fully loaded.\n\n## generating still frame at build time\n\nThe disadvantage of not providing a `still` prop, even though a stand-in will be generated, is that your GIF must fully load before the still frame appears instead of the (likely slowly moving) GIF.\n\nOne streamlined way to generate a still frame ahead of time is to incorporate the [gif-frames module](https://github.com/benwiley4000/gif-frames), which has only pure JavaScript dependencies, into your build process.\n\ne.g.\n\n```javascript\nvar gifFrames = require('gif-frames');\nvar fs = require('fs');\n\ngifFrames({ url: 'src/image.gif', frames: 0 }).then(function (frameData) {\n  frameData[0].getImageStream().pipe(fs.createWriteStream('build/still.jpg'));\n});\n```\n\nIf you need finer-tuned control over image quality, you can try [Gifsicle](https://www.lcdf.org/gifsicle/).\n\n## styles\n\n**Important:** In order for the default styles to be used, **dist/gifplayer.css** must be included in your HTML.\n\nCSS styles can be overridden easily. To add a border around the image, try including this CSS **after** including the default styles:\n\n```css\n.gif_player img {\n  border: 3px solid cornflowerblue;\n}\n```\n\n## usage with sass\n\nIf you preprocess your styles with Sass, you can have more powerful control via Sass variables. The defaults are located at the top of [**src/GifPlayer.scss**](src/GifPlayer.scss):\n\n```scss\n$gif_btn_bg_base_color: #000 !default;\n$gif_btn_bg_opacity: 0.5 !default;\n$gif_btn_bg_opacity_hover: 0.7 !default;\n// ...etc\n```\nThe `!default` flag means that declaring alternatives **before** including the default styles will override them.\n\n```scss\n// Include var overrides before default styles import\n$gif_btn_bg_base_color: gold;\n$gif_btn_text_color: cornflowerblue;\n$gif_btn_font_family: serif;\n\n// Using webpack css/sass module import syntax\n@import '~react-gif-player/src/GifPlayer';\n\n// include other overrides afterward\n.gif_player {\n  margin: 1rem;\n\n  img {\n    border: 2px solid #222;\n  }\n}\n```\n\n## development\n\nFor building and testing instructions, see [CONTRIBUTING.md](CONTRIBUTING.md).\n","readmeFilename":"README.md"}