{"id":19211632,"url":"https://github.com/arjunkathuria/react-smooth-image","last_synced_at":"2025-08-18T17:13:23.684Z","repository":{"id":57344982,"uuid":"130210174","full_name":"arjunkathuria/react-smooth-image","owner":"arjunkathuria","description":"Butter smooth loading non-jumping images for react that just work","archived":false,"fork":false,"pushed_at":"2020-04-27T14:46:57.000Z","size":1283,"stargazers_count":15,"open_issues_count":1,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-14T07:55:38.197Z","etag":null,"topics":["image","image-loading","images","loading","react","reactjs","smooth"],"latest_commit_sha":null,"homepage":"","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/arjunkathuria.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":"2018-04-19T12:10:05.000Z","updated_at":"2022-03-18T05:26:33.000Z","dependencies_parsed_at":"2022-09-16T18:00:19.958Z","dependency_job_id":null,"html_url":"https://github.com/arjunkathuria/react-smooth-image","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/arjunkathuria/react-smooth-image","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arjunkathuria%2Freact-smooth-image","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arjunkathuria%2Freact-smooth-image/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arjunkathuria%2Freact-smooth-image/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arjunkathuria%2Freact-smooth-image/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arjunkathuria","download_url":"https://codeload.github.com/arjunkathuria/react-smooth-image/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arjunkathuria%2Freact-smooth-image/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270539703,"owners_count":24603207,"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","status":"online","status_checked_at":"2025-08-15T02:00:12.559Z","response_time":110,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["image","image-loading","images","loading","react","reactjs","smooth"],"created_at":"2024-11-09T13:43:09.753Z","updated_at":"2025-08-18T17:13:23.658Z","avatar_url":"https://github.com/arjunkathuria.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Smooth Image\n\nAre you tired of your react app's layout flashing around because an\nimage is yet to load and its taking zero space until then?\n\nDoes the progressive image loading from top bottom makes you cringe ?\n\nYou wish there was something neat out there that `just works` ?\n\nYea, mee too.\n\n\n```\n  \"Fear not, for i am here\"\n  \n  - All Might.\n```\n\n## Demo\n\nFirst one is a normal image, the second one is using `react-smooth-image`.\n\n![](./demo/images/meh-react-logo.gif)   ![](./demo/images/smooth-react-logo-3.gif)\n\n## Install\n```\n$ npm install --save react-smooth-image\n```\n\nif you prefer to use yarn then\n\n```\n$ yarn add react-smooth-image\n```\n\n\n## Usage\n\n````js\nimport SmoothImage from 'react-smooth-image';\n.\n.\n.\n\nrender() {\nreturn (\n  \u003cdiv className=\"image-container\"\u003e\n     \u003cSmoothImage\n         src=\"https://...\"\n         alt=\"a nice image of mordor\"\n         transitionTime={1.0}\n         //Other props if you choose to use them\n      /\u003e\n  \u003c/div\u003e\n  )\n}\n````\n## Props\n\n#### src\n    type: string\n    is mandatory: yes\n    Description: The source url of the image to be loaded.\n\n#### alt\n    type: string\n    is mandatory: yes\n    Description: The `alt` text to be passed to the image. Facilitates accessibility and screen readers and including this is always a good idea.\n\n#### placeholderImgUrl\n    type: string\n    is mandatory: no\n    default value: ''\n    Description: if you wanna use a placeholder image, you may pass the url here or pass an embedded image data.\n    \n#### containerStyles\n    type: object\n    is mandatory: no\n    Description: If you want to overwrite the container styles, pass a js style object to it like you would pass in a style attribute in a regular react element.\n\n#### imageStyles\n    type: object\n    is mandatory: no\n    Description: If you want to overwrite the image styles, pass a style object in this prop.\n\n#### transitionTimingFunction\n    type: string\n    is mandatory: no\n    default value: \"ease-in\"\n    Description: The css transition-timing function to use when the image is loaded.\n    \n#### transitionTime\n    type: number\n    is mandatory: no\n    default value: 0.3s\n    Description: The time for the image to apply the given transition in seconds. For eg 0.3\n\n    \n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farjunkathuria%2Freact-smooth-image","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farjunkathuria%2Freact-smooth-image","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farjunkathuria%2Freact-smooth-image/lists"}