{"id":20762829,"url":"https://github.com/astrocoders/react-image-smooth-loading","last_synced_at":"2025-04-30T07:08:45.642Z","repository":{"id":65373060,"uuid":"52211454","full_name":"Astrocoders/react-image-smooth-loading","owner":"Astrocoders","description":"[not maintained] Images which just flick to appear aren't cool. Images which appear smoothly with a fade like Instagram are cool","archived":false,"fork":false,"pushed_at":"2019-02-26T15:53:28.000Z","size":486,"stargazers_count":83,"open_issues_count":2,"forks_count":7,"subscribers_count":5,"default_branch":"develop","last_synced_at":"2025-04-30T07:08:37.944Z","etag":null,"topics":["css-in-js","react","react-animations","smooth-image","styled-components"],"latest_commit_sha":null,"homepage":"https://astrocoders.dev/react-image-smooth-loading/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Astrocoders.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-02-21T14:55:14.000Z","updated_at":"2025-02-11T15:48:30.000Z","dependencies_parsed_at":"2023-01-19T23:35:32.179Z","dependency_job_id":null,"html_url":"https://github.com/Astrocoders/react-image-smooth-loading","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Astrocoders%2Freact-image-smooth-loading","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Astrocoders%2Freact-image-smooth-loading/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Astrocoders%2Freact-image-smooth-loading/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Astrocoders%2Freact-image-smooth-loading/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Astrocoders","download_url":"https://codeload.github.com/Astrocoders/react-image-smooth-loading/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251658207,"owners_count":21622820,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css-in-js","react","react-animations","smooth-image","styled-components"],"created_at":"2024-11-17T10:39:24.385Z","updated_at":"2025-04-30T07:08:45.619Z","avatar_url":"https://github.com/Astrocoders.png","language":"JavaScript","readme":"ReactImg\n========\nReact component for making your site images appear in a fade in.\nSee a [demo](http://astrocoders.com/react-image-smooth-loading/).\n\n# Install\n```\nyarn add react-image-smooth-loading\n```\n_Note_: styled-components and react were added as peer dependencies.\nIf you don't have then you must install them as well.\n```\nyarn add react-image-smooth-loading styled-components react\n```\n# Usage\n\n```js\nimport Img from 'react-image-smooth-loading'\n\n// Define which placeholder to show while the image is loading\n// Can be any image file.\n// There's already a default one in base64, but you'd like to change ;)\nImg.globalPlaceholder = '/images/placeholder.png'\n\nexport default function ImageList({ list }) {\n  return (\n    \u003cdiv className=\"image-grid\"\u003e\n      {list.map(url =\u003e (\n        \u003cImageItemWrapper\u003e\n          \u003cImg src={url} /\u003e\n          \u003cp\u003eMy awesome image\u003c/p\u003e\n        \u003c/ImageItemWrapper\u003e\n      ))}\n    \u003c/div\u003e\n  )\n}\n```\n\nRemember that Img is totally responsive, which means that it will fit accordingly\nto the space given to it by its container.\n\n\n## Options\n\n```js\nconst props = {\n  src: PropTypes.string.isRequired,\n  placeholder: PropTypes.string, // Optional image placeholder, overrides globalPlaceholder,\n  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),\n  holderClasses: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),\n  placeholderProps: PropTypes.object,\n  onClick: PropTypes.func,\n  alt: PropTypes.string,\n}\n\n\u003cImg {...props} /\u003e\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fastrocoders%2Freact-image-smooth-loading","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fastrocoders%2Freact-image-smooth-loading","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fastrocoders%2Freact-image-smooth-loading/lists"}