{"id":25793782,"url":"https://github.com/wwwalireza/picload","last_synced_at":"2025-02-27T13:39:02.051Z","repository":{"id":49615332,"uuid":"485112511","full_name":"wwwAlireza/picload","owner":"wwwAlireza","description":"Load images with beautiful effects","archived":false,"fork":false,"pushed_at":"2023-02-21T19:34:56.000Z","size":409,"stargazers_count":32,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-08-11T11:15:37.224Z","etag":null,"topics":["animation-images","babel","es","image-loader","images","img","javascript","javascript-library","js","lazy","loading","picload","react"],"latest_commit_sha":null,"homepage":"https://wwwalireza.github.io/picload/","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/wwwAlireza.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":"2022-04-24T18:50:51.000Z","updated_at":"2023-12-12T05:56:07.000Z","dependencies_parsed_at":"2022-08-25T15:41:53.729Z","dependency_job_id":null,"html_url":"https://github.com/wwwAlireza/picload","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/wwwAlireza%2Fpicload","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wwwAlireza%2Fpicload/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wwwAlireza%2Fpicload/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wwwAlireza%2Fpicload/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wwwAlireza","download_url":"https://codeload.github.com/wwwAlireza/picload/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241019209,"owners_count":19895214,"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":["animation-images","babel","es","image-loader","images","img","javascript","javascript-library","js","lazy","loading","picload","react"],"created_at":"2025-02-27T13:39:01.354Z","updated_at":"2025-02-27T13:39:02.038Z","avatar_url":"https://github.com/wwwAlireza.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg src='https://s9.gifyu.com/images/download-removebg-previeweb66c2915f62c21e.png' width='100%'/\u003e\n\n\n[![NPM](https://img.shields.io/npm/v/picload.svg)](https://www.npmjs.com/package/picload) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\n\u003e Make the wait sweeter for the user\n\nWhen your website's photos are loading, what is displayed instead? If your answer is \"nothing\" I must say this is a disaster! Because this may bore the user and leave a bad ui \u0026 ux for you. \u003cbr\u003e\nwhat's the solution? \u003cbr\u003e\nTurns out, use Picload .\nIn fact, before loading images, Picload renders things instead to make your ui more beautiful and increase user patience. \u003cbr\u003e\nNow you know what Picload does? \u003cbr\u003e\nAdd this library to your React project and enjoy\n\n## Docs\n - [installation](#install)\n - [options](#options)\n    - [Placeholder](#placeholder)\n    - [Random Color](#random-color)\n        - [dark](#color-ranges)\n        - [light](#color-ranges)\n        - [any](#color-ranges)\n    - [Color](#color)\n    - [Progress](#progress)\n        - [circles](#progress-animations)\n        - [ring](#progress-animations)\n        - [ripple](#progress-animations)\n        - [spinner](#progress-animations)\n        - [roller](#progress-animations)\n        - [progressColor](#progress-color)\n        - [progressBg](#progress-background)\n        - [ProgressStyle](#progress-style)\n        - [custom](#custom-progress)\n- [Basic attributes](#basic-attributes)\n    - [style](#b-style)\n    - [className](#b-class-name)\n    - [alt](#b-alt)\n    - [ref](#b-ref)\n    - [loading](#b-loading)\n- [Sample](#sample)\n    \n## Install\n\nInstall Picload with npm\n\n```bash\n  npm i picload\n```\n```jsx\n  import Picload from 'picload'\n```\n    \n## Example Usage\nAfter installation, import it and take advantage of its capabilities\n```jsx\nimport Picload from 'picload'\nimport myPicture from './images/picture.png'\nimport myPicture_min from './images/picture_min.png'\n\nconst App = () =\u003e {\n  return (\n    \u003cdiv style={{width: '80px', height: '80px'}}\u003e\n      \u003cPicload src={myPicture} placeholder={myPicture_min} alt='picture' className='my-image'/\u003e\n    \u003c/div\u003e\n  )\n};\n\nexport default App;\n```\n\n\n## options\n- \u003ch3\u003ePlaceholder\u003c/h3\u003e\nSuppose a user opens your website and wants to view someone's profile. The photos in the user's profile are relatively large and the user has to wait a few seconds for the photos to load. What we can do here is to pre-prepare the thumbnails of the original photos and display them before the original photo is loaded (due to their very small size they load much faster)\n- **usage** \u003cbr\u003e\nIt is very easy to use and according to the source code below.\nFirst we import the original photo and thumbnail ...\n```jsx\nimport Picload from 'picload';\nimport Mountain from './images/mountain.jpeg';\nimport Mountin_min from './images/mountin_min.jpeg';\n\nconst App = () =\u003e {\n    return(\n        \u003cdiv\u003e\n            \u003cPicload src={Mountain} placeholder={Mountin_min} /\u003e\n        \u003c/div\u003e\n    )\n};\n\nexport default App;\n```\n\u003chr\u003e\n\n- \u003ch3\u003eRandom color\u003c/h3\u003e\n\u003e _randomColor : 'color'_\n\nBefore loading images, place a random color in the selected range (dark \u0026 light \u0026 any) instead of the image \u003cbr\u003e\nThe randomColor value should be the color range you want\n\n- **usage** \u003cbr\u003e\n```jsx\nconst myConfig = {\n    randomColor: 'dark'\n}\n\u003cPicload src={Lorem} config={myConfig} /\u003e\n// or\n\u003cPicload src={Lorem} config={{randomColor: 'any'}} /\u003e\n```\n\u003e **_NOTE:_**  All options and settings of this library must be set in the (config) prop. except placeholder\n\u003ca id='color-ranges'\u003e\u003c/a\u003e\n- color ranges\n    - dark :\n    [\"#606291\", \"#868C9F\", \"#05060B\", \"#E8CEC3\", \"#5B5867\", \"#083281\", \"#95120E\", \"#184E39\", \"#705400\", \"#401D87\"]\n    - light :\n    [\"#EBF1FF\", \"#589A23\", \"#FAFBFC\", \"#F2ECFE\", \"#7243D0\", \"#55D8C1\", \"#FF6FB5\", \"#FCF69C\", \"#FFD59E\", \"#069A8E\"]\n    - any :\n    A combination of both\n\u003chr\u003e\n\n\u003ca id='color'\u003e\u003c/a\u003e\n- \u003ch3\u003eColor\u003c/h3\u003e\n\u003e _color : 'color'_\n\nInstead of choosing a random color, choose what color to display before the image is loaded\n- **usage** \u003cbr\u003e\n```jsx\n\u003cPicload src={linux} config={{ color: '#212526' }} /\u003e\n```\n\n\u003chr\u003e\n\n- \u003ch3\u003eProgress\u003c/h3\u003e\n\u003e _progress : 'progress type'_\n\nBeautiful animations, before the image is loaded\n\n- **usage** \u003cbr\u003e\nFirst you need to import the css file of the animation you want\n```jsx\nimport \"picload/dist/progress-ripple.css\"\n```\nNow you can use it\n```jsx\n\u003cPicload src={linux} config={{ progress: 'circles' }} /\u003e\n```\n- \u003ch3\u003eprogress animations\u003c/h3\u003e\n\n| Name          | Relevant css file                 |\n| ------------- | -------------                      |\n| circles       | picload/dist/progress-circles.css  |\n| ring          | picload/dist/progress-ring.css     |\n| ripple        | picload/dist/progress-ripple.css   |\n| spinner       | picload/dist/progress-spinner.css  |\n| roller        | picload/dist/progress-roller.css   |\n\n- \u003ch3\u003eprogress color\u003c/h3\u003e\n\u003e _progressColor : 'color'_\n\nYou can set the color of progress\n```jsx\nconst myConfig = {\n  progress: 'spinner',\n  progressColor: '#f1f1f1'\n}\n\u003cPicload src={myImage} config={myConfig} /\u003e\n```\n- \u003ch3\u003eprogress background\u003c/h3\u003e\n\u003e _progressBg : 'color'_\n\nYou can set the background color of progress\n```jsx\nconst myConfig = {\n  progress: 'spinner',\n  progressColor: '#f1f1f1',\n  progressBg: '#0d1117',\n}\n\u003cPicload src={myImage} config={myConfig} /\u003e\n```\n- \u003ch3\u003eprogress style\u003c/h3\u003e\n\u003e _progressStyle : {style}_\n\nyou can style your progress. For example, you want to make it a little bigger:\n```jsx\nconst myConfig = {\n  progress: 'spinner',\n  progressColor: '#f1f1f1',\n  progressBg: '#0d1117',\n  progressStyle: {\n    transform: 'scale(1.2)'\n  }\n}\n\u003cPicload src={myImage} config={myConfig} /\u003e\n```\n- \u003ch3\u003ecustom progress\u003c/h3\u003e\n\u003e _progress : \u0026lt;component /\u0026gt;_\n  \nCan we add custom progress we made ourselves? \u003cbr\u003e\nDefinitely yes! Just import that component and pass it to progress (in config)\n\n```jsx\nimport myProgress from './myProgress'\n```\n```jsx\nconst myConfig = {\n  progress: \u003cmyProgress /\u003e;\n}\n\u003cPicload src={Mountain} config={myConfig}/\u003e\n```\n## Basic attributes\nIn picload, it is possible to use all basic attributes. These attributes are appended directly to the (img)\n\u003e You do not need to define this basic information in (config)\n\u003ca id='b-style'\u003e\u003c/a\u003e\n- **style**\n```jsx\n\u003cPicload ... style={ {transform: 'rotate(5deg)'} } /\u003e\n```\n\u003ca id='b-class-name'\u003e\u003c/a\u003e\n- **className**\n```jsx\n\u003cPicload ... className='fw-bold bg-danger' /\u003e\n```\n\u003ca id='b-alt'\u003e\u003c/a\u003e\n- **alt**\n```jsx\n\u003cPicload ... alt='image alt' /\u003e\n```\n\u003ca id='b-ref'\u003e\u003c/a\u003e\n- **ref** \u003cbr\u003e\nIf you have an (Ref) and you want to link it to your image tag, you have to give it to (cref) in Picload\n\u003e Why cref? Because if we want to give it the same name as ref to the Picload component, we will get an error. Because React does not accept giving a ref to the component. So here the picload will be a ref transfer\n\n```jsx\nconst myImg = React.useRef(null)\n\n\u003cPicload ... cref={myImg} /\u003e\n```\n\u003ca id='b-loading'\u003e\u003c/a\u003e\n- **loading** \u003cbr\u003e\n```jsx\n\u003cPicload ... loading='lazy' /\u003e\n```\n\u003chr\u003e\n\n### Sample\n![](https://s3.gifyu.com/images/sample7c40249c75346b55.gif)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwwwalireza%2Fpicload","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwwwalireza%2Fpicload","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwwwalireza%2Fpicload/lists"}