{"id":19055305,"url":"https://github.com/dilane3/react-image-progressive-loading","last_synced_at":"2026-05-07T19:08:49.227Z","repository":{"id":65484805,"uuid":"407174082","full_name":"dilane3/react-image-progressive-loading","owner":"dilane3","description":"React-image-progressive-loading is a library that helps you include heavy images in your webpage and display them when visible in the window. the display is progressive.","archived":false,"fork":false,"pushed_at":"2021-09-25T13:01:42.000Z","size":13707,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-08T10:35:44.949Z","etag":null,"topics":["image","lazy","lazy-loading","loading","reactjs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dilane3.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-09-16T13:23:47.000Z","updated_at":"2021-09-28T11:22:26.000Z","dependencies_parsed_at":"2023-01-25T18:46:26.200Z","dependency_job_id":null,"html_url":"https://github.com/dilane3/react-image-progressive-loading","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dilane3%2Freact-image-progressive-loading","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dilane3%2Freact-image-progressive-loading/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dilane3%2Freact-image-progressive-loading/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dilane3%2Freact-image-progressive-loading/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dilane3","download_url":"https://codeload.github.com/dilane3/react-image-progressive-loading/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239598976,"owners_count":19665911,"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":["image","lazy","lazy-loading","loading","reactjs"],"created_at":"2024-11-08T23:43:56.578Z","updated_at":"2026-05-07T19:08:44.195Z","avatar_url":"https://github.com/dilane3.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-image-progressive-loading\n\nReact-image-progressive-loading is a tool that helps you include heavy images in your webpage and display them when visible in the window. the display is progressive.\n\nWhen we create a website which will contains a lot of images (heavy images), the loading of the page will takes more time because, the browser might load all images which are present in the web page. That's why, this library is made up.\n\n### installation\n\n```bash\n\nnpm install react-image-progressive-loading\n\n```\n\nor\n\n```bash\n\nnpm i react-image-progressive-loading\n\n```\n\n### usage\n\n```javascript\n\nimport React from 'react'\nimport {Image} from 'react-image-progressive-loading'\n\nconst image = require(\"path/to/image.png\").default\n\nconst ProfilImage = () =\u003e {\n  return (\n    \u003cImage image={image} /\u003e\n  )\n}\n\nexport default ProfilImage\n\n```\n\n#### Props\n|  prop  | Default value | required | Description |\n|---     |---            |---       |---          |\n|image   | not defined   | true     |This prop takes as value the source of the image|\n|alt     | \"loading\"       | false    |It defines the description of the image when it's not loaded|\n|className| image         | false    |It's used for styling the image on the web page|\n|blur    | false         | false    |This prop is used for difining the type of loading that we want. If it's false, the background of te image will be gray while loading. If it's equal to true the background will be gray and there will be a blur             |\n\nThe default value of the `className` prop is defined like follow\n```css\n\n.image {\n  width: 300px;\n  height: 300px;\n  margin: 10px;\n}\n\n```\n\nyou can provide another style. For exameple\n\n```css\n\n.image-style {\n  width: 100%;\n  height: 100%;\n  margin: 10px;\n}\n\n```\n\nand call it like that:\n\n```javascript\n// code here\n\nconst ProfilImage = () =\u003e {\n  return (\n    \u003cImage image={image} alt=\"description\" className=\"image-style\" /\u003e\n  )\n}\n\n// code here\n\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdilane3%2Freact-image-progressive-loading","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdilane3%2Freact-image-progressive-loading","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdilane3%2Freact-image-progressive-loading/lists"}