{"_id":"@b3rz3rkr/material-ui-image","_rev":"8-de4ee2e13608f184f88b12c05516a311","name":"@b3rz3rkr/material-ui-image","dist-tags":{"latest":"4.0.14"},"versions":{"4.0.12":{"name":"@b3rz3rkr/material-ui-image","version":"4.0.12","description":"Material style image with loading animation","main":"lib/index.js","typings":"lib/index.d.ts","scripts":{"build":"babel src -d lib --copy-files","prepublish":"babel src -d lib --copy-files","styleguide":"styleguidist server","styleguide:build":"styleguidist build","publish-docs":"npm run styleguide:build && npm run gh-pages","gh-pages":"gh-pages -d styleguide","test":"standard"},"repository":{"type":"git","url":"git+https://github.com/b3rz3rkr/material-ui-image.git"},"keywords":["react","material","image","loading","react-component"],"author":{"name":"Wertarbyte","email":"kontakt@wertarbyte.com","url":"https://wertarbyte.com"},"license":"MIT","bugs":{"url":"https://github.com/b3rz3rkr/material-ui-image/issues"},"homepage":"https://github.com/b3rz3rkr/material-ui-image#readme","devDependencies":{"@babel/cli":"^7.22.6","@babel/core":"^7.22.8","@babel/plugin-proposal-class-properties":"^7.18.6","@babel/preset-env":"^7.22.7","@babel/preset-react":"^7.22.5","babel-eslint":"^10.1.0","babel-loader":"^9.1.3","gh-pages":"^5.0.0","standard":"^17.1.0","webpack":"^5.88.1"},"peerDependencies":{"@mui/material":"^5.0.0","react":"^17.0.0 || ^18.0.0","react-dom":"^17.0.0 || ^18.0.0","react-icons":"^4.12.0"},"dependencies":{"prop-types":"^15.8.1"},"standard":{"parser":"babel-eslint"},"gitHead":"f9277d43d24b12927baa9b949f22cd4453347336","_id":"@b3rz3rkr/material-ui-image@4.0.12","_nodeVersion":"18.15.0","_npmVersion":"9.5.0","dist":{"integrity":"sha512-j3c/pXSfymK4f0f3zglkUvBp8wwzTuS398Z0tieyM+qDaRlYV3EooOfHTCA7Ucf1IQU0UvZz6CA1HvS67/C8Lg==","shasum":"585ff609490275ccda867d12575a4fcd8a68429e","tarball":"https://registry.npmjs.org/@b3rz3rkr/material-ui-image/-/material-ui-image-4.0.12.tgz","fileCount":17,"unpackedSize":1070281,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID/LX2N4DXcsIk8bZEwzpcTtF7pmtdlyHUdVHbOhZXq5AiAflFSaPTt5ZYYDrun6WOVSYFC2CCok4W5n0Z4+492JKw=="}]},"_npmUser":{"name":"b3rz3rkr","email":"b3rz3rkr@gmail.com"},"directories":{},"maintainers":[{"name":"b3rz3rkr","email":"b3rz3rkr@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/material-ui-image_4.0.12_1704491066220_0.99961889614712"},"_hasShrinkwrap":false},"4.0.13":{"name":"@b3rz3rkr/material-ui-image","version":"4.0.13","description":"Material style image with loading animation","main":"lib/index.js","typings":"lib/index.d.ts","scripts":{"build":"babel src -d lib --copy-files","prepublish":"babel src -d lib --copy-files","styleguide":"styleguidist server","styleguide:build":"styleguidist build","publish-docs":"npm run styleguide:build && npm run gh-pages","gh-pages":"gh-pages -d styleguide","test":"standard"},"repository":{"type":"git","url":"git+https://github.com/b3rz3rkr/material-ui-image.git"},"keywords":["react","material","image","loading","react-component"],"author":{"name":"Wertarbyte","email":"kontakt@wertarbyte.com","url":"https://wertarbyte.com"},"license":"MIT","bugs":{"url":"https://github.com/b3rz3rkr/material-ui-image/issues"},"homepage":"https://github.com/b3rz3rkr/material-ui-image#readme","devDependencies":{"@babel/cli":"^7.22.6","@babel/core":"^7.22.8","@babel/plugin-proposal-class-properties":"^7.18.6","@babel/preset-env":"^7.22.7","@babel/preset-react":"^7.22.5","babel-eslint":"^10.1.0","babel-loader":"^9.1.3","gh-pages":"^5.0.0","standard":"^17.1.0","webpack":"^5.88.1"},"peerDependencies":{"@mui/material":"^5.0.0","react":"^17.0.0 || ^18.0.0","react-dom":"^17.0.0 || ^18.0.0","react-icons":"^4.12.0"},"dependencies":{"prop-types":"^15.8.1"},"standard":{"parser":"babel-eslint"},"gitHead":"f9277d43d24b12927baa9b949f22cd4453347336","_id":"@b3rz3rkr/material-ui-image@4.0.13","_nodeVersion":"18.15.0","_npmVersion":"9.5.0","dist":{"integrity":"sha512-i8gIfL3LdtBpYVlpL0ok0yIzXElqqm6hH7uENL3NUsk4v8CE3PQpOMGfbuQ2lnNTr8rfUVRXZk18pKiziqh9DA==","shasum":"3a88fe09914786a64603999fa354e12c259cc97a","tarball":"https://registry.npmjs.org/@b3rz3rkr/material-ui-image/-/material-ui-image-4.0.13.tgz","fileCount":17,"unpackedSize":1070254,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFTuZAm2NV5U+Y27+r0ucBkBr8wxprb61DONDU7jhIHGAiBSWB0GTaGHQ+C3072fCWXL4LAWaXy8M3v1KpMsIYMy8Q=="}]},"_npmUser":{"name":"b3rz3rkr","email":"b3rz3rkr@gmail.com"},"directories":{},"maintainers":[{"name":"b3rz3rkr","email":"b3rz3rkr@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/material-ui-image_4.0.13_1704718945844_0.5045521620891134"},"_hasShrinkwrap":false},"4.0.14":{"name":"@b3rz3rkr/material-ui-image","version":"4.0.14","description":"Material style image with loading animation","main":"lib/index.js","typings":"lib/index.d.ts","scripts":{"build":"babel src -d lib --copy-files","prepublish":"babel src -d lib --copy-files","styleguide":"styleguidist server","styleguide:build":"styleguidist build","publish-docs":"npm run styleguide:build && npm run gh-pages","gh-pages":"gh-pages -d styleguide","test":"standard"},"repository":{"type":"git","url":"git+https://github.com/b3rz3rkr/material-ui-image.git"},"keywords":["react","material","image","loading","react-component"],"author":{"name":"Wertarbyte","email":"kontakt@wertarbyte.com","url":"https://wertarbyte.com"},"license":"MIT","bugs":{"url":"https://github.com/b3rz3rkr/material-ui-image/issues"},"homepage":"https://github.com/b3rz3rkr/material-ui-image#readme","devDependencies":{"@babel/cli":"^7.22.6","@babel/core":"^7.22.8","@babel/plugin-proposal-class-properties":"^7.18.6","@babel/preset-env":"^7.22.7","@babel/preset-react":"^7.22.5","babel-eslint":"^10.1.0","babel-loader":"^9.1.3","gh-pages":"^5.0.0","standard":"^17.1.0","webpack":"^5.88.1"},"peerDependencies":{"@mui/material":"^5.0.0","react":"^17.0.0 || ^18.0.0","react-dom":"^17.0.0 || ^18.0.0","react-icons":"^4.0.0 || ^5.0.0"},"dependencies":{"prop-types":"^15.8.1"},"standard":{"parser":"babel-eslint"},"_id":"@b3rz3rkr/material-ui-image@4.0.14","gitHead":"740e6162532b9d141197c4e418efdd4acf5943c6","_nodeVersion":"20.11.0","_npmVersion":"10.4.0","dist":{"integrity":"sha512-NWqXY7UNWpRG4KSxb1NqizSol1JT3j8dKVNQKAQGPL1tcewKswpOoDzHtanFbfb5nT8K76TkwG9+wZ9fWapDDw==","shasum":"af6ab7df7d9a1ab4e10f9f499a282e5ce137039c","tarball":"https://registry.npmjs.org/@b3rz3rkr/material-ui-image/-/material-ui-image-4.0.14.tgz","fileCount":17,"unpackedSize":1070296,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCBIi6DRyfKs7g0s+D6+2P+wkjsABUH39HMwKQa02zvgwIhAINPXM7Sx6ffgxfJc4ARRL0BsAvOQNRk9ewTFhwMC7du"}]},"_npmUser":{"name":"b3rz3rkr","email":"b3rz3rkr@gmail.com"},"directories":{},"maintainers":[{"name":"b3rz3rkr","email":"b3rz3rkr@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/material-ui-image_4.0.14_1706283476870_0.7438276330192983"},"_hasShrinkwrap":false}},"time":{"created":"2024-01-05T18:34:46.565Z","4.0.9":"2024-01-05T18:34:46.932Z","modified":"2024-01-26T15:37:57.215Z","4.0.10":"2024-01-05T18:40:47.020Z","4.0.11":"2024-01-05T20:57:11.541Z","4.0.12":"2024-01-05T21:44:26.432Z","4.0.13":"2024-01-08T13:02:26.130Z","4.0.14":"2024-01-26T15:37:57.051Z"},"maintainers":[{"name":"b3rz3rkr","email":"b3rz3rkr@gmail.com"}],"description":"Material style image with loading animation","homepage":"https://github.com/b3rz3rkr/material-ui-image#readme","keywords":["react","material","image","loading","react-component"],"repository":{"type":"git","url":"git+https://github.com/b3rz3rkr/material-ui-image.git"},"author":{"name":"Wertarbyte","email":"kontakt@wertarbyte.com","url":"https://wertarbyte.com"},"bugs":{"url":"https://github.com/b3rz3rkr/material-ui-image/issues"},"license":"MIT","readme":"# Material UI Image\r\n[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\r\n\r\nThis fork uses ['react-icons'](https://react-icons.github.io/react-icons/) instead of '@mui/icons-material'.\r\nIf your project already have react-icons you don't need to install '@mui/icons-material' for this module. \r\n\r\nImages are ugly until they're loaded. Materialize it with material image! It will fade in like the material image loading pattern suggests.\r\n\r\n![Example](demo.gif)\r\n\r\n## Installation\r\n\r\n```sh\r\nnpm install @b3rz3rkr/material-ui-image\r\n```\r\n\r\n**Note:** This is the version for Material-UI 1.0.0-rc.0 or later. If you are using Material-UI 1.0.0-beta, you should update to the latest version. If you are still using Material-UI 0.x, you can use our [legacy version][legacy].\r\n\r\n## Usage\r\n\r\nUse this component just like a regular img tag.\r\n\r\n```jsx\r\nimport Image from '@b3rz3rkr/material-ui-image';\r\n\r\n\r\n```\r\n\r\n### Material UI Image Properties\r\n\r\n| Name | Type | Default | Description |\r\n|--------------------|----------|-----------------------------------------|---------------------------------------------------------------------------------------------------|\r\n| animationDuration | `number` | 3000 | Duration of the fading animation, in milliseconds. |\r\n| aspectRatio | `float` | (1/1) | Specifies the aspect ratio of the image. |\r\n| cover | `bool` | false | Override the image's object fit to `cover` |\r\n| color | `string` | white | Override the background color. |\r\n| disableError | `bool` | false | Disables the error icon if set to `true`. |\r\n| disableSpinner | `bool` | false | Disables the loading spinner if set to `true`. |\r\n| disableTransition | `bool` | false | Disables the transition if set to `true`. |\r\n| errorIcon | `node` | | Override the error icon. |\r\n| iconContainerStyle | `object` | | Override the inline-styles of the container that contains the loading spinner and the error icon. |\r\n| imageStyle | `object` | { width: 'inherit', height: 'inherit' } | Override the inline-styles of the image. |\r\n| loading | `node` | | Override the loading component. |\r\n| onClick | `func` | | Fired when the user clicks on the image happened. |\r\n| src* | `string` | | Specifies the URL of an image. |\r\n| style | `object` | | Override the inline-styles of the root element. |\r\n\r\n\\* required property\r\n\r\nAll other props are passed through to the underlying `img` element after the image is loaded.\r\n\r\n## License\r\n\r\nThe files included in this repository are licensed under the MIT license.\r\n\r\n[legacy]: https://github.com/jy95/material-ui-image/tree/legacy\r\n","readmeFilename":"README.md"}