https://github.com/wwwalireza/picload
Load images with beautiful effects
https://github.com/wwwalireza/picload
animation-images babel es image-loader images img javascript javascript-library js lazy loading picload react
Last synced: 7 months ago
JSON representation
Load images with beautiful effects
- Host: GitHub
- URL: https://github.com/wwwalireza/picload
- Owner: wwwAlireza
- Created: 2022-04-24T18:50:51.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-02-21T19:34:56.000Z (over 2 years ago)
- Last Synced: 2024-08-11T11:15:37.224Z (about 1 year ago)
- Topics: animation-images, babel, es, image-loader, images, img, javascript, javascript-library, js, lazy, loading, picload, react
- Language: JavaScript
- Homepage: https://wwwalireza.github.io/picload/
- Size: 399 KB
- Stars: 32
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/picload) [](https://standardjs.com)
> Make the wait sweeter for the user
When 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 & ux for you.
what's the solution?
Turns out, use Picload .
In fact, before loading images, Picload renders things instead to make your ui more beautiful and increase user patience.
Now you know what Picload does?
Add this library to your React project and enjoy
## Docs
- [installation](#install)
- [options](#options)
- [Placeholder](#placeholder)
- [Random Color](#random-color)
- [dark](#color-ranges)
- [light](#color-ranges)
- [any](#color-ranges)
- [Color](#color)
- [Progress](#progress)
- [circles](#progress-animations)
- [ring](#progress-animations)
- [ripple](#progress-animations)
- [spinner](#progress-animations)
- [roller](#progress-animations)
- [progressColor](#progress-color)
- [progressBg](#progress-background)
- [ProgressStyle](#progress-style)
- [custom](#custom-progress)
- [Basic attributes](#basic-attributes)
- [style](#b-style)
- [className](#b-class-name)
- [alt](#b-alt)
- [ref](#b-ref)
- [loading](#b-loading)
- [Sample](#sample)
## Install
Install Picload with npm
```bash
npm i picload
```
```jsx
import Picload from 'picload'
```
## Example Usage
After installation, import it and take advantage of its capabilities
```jsx
import Picload from 'picload'
import myPicture from './images/picture.png'
import myPicture_min from './images/picture_min.png'
const App = () => {
return (
)
};
export default App;
```
## options
-
Placeholder
Suppose 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)
- **usage**
It is very easy to use and according to the source code below.
First we import the original photo and thumbnail ...
```jsx
import Picload from 'picload';
import Mountain from './images/mountain.jpeg';
import Mountin_min from './images/mountin_min.jpeg';
const App = () => {
return(
)
};
export default App;
```
-
Random color
> _randomColor : 'color'_
Before loading images, place a random color in the selected range (dark & light & any) instead of the image
The randomColor value should be the color range you want
- **usage**
```jsx
const myConfig = {
randomColor: 'dark'
}
// or
```
> **_NOTE:_** All options and settings of this library must be set in the (config) prop. except placeholder
- color ranges
- dark :
["#606291", "#868C9F", "#05060B", "#E8CEC3", "#5B5867", "#083281", "#95120E", "#184E39", "#705400", "#401D87"]
- light :
["#EBF1FF", "#589A23", "#FAFBFC", "#F2ECFE", "#7243D0", "#55D8C1", "#FF6FB5", "#FCF69C", "#FFD59E", "#069A8E"]
- any :
A combination of both
Color
> _color : 'color'_
Instead of choosing a random color, choose what color to display before the image is loaded
- **usage**
```jsx
```
-
Progress
> _progress : 'progress type'_
Beautiful animations, before the image is loaded
- **usage**
First you need to import the css file of the animation you want
```jsx
import "picload/dist/progress-ripple.css"
```
Now you can use it
```jsx
```
-
progress animations
| Name | Relevant css file |
| ------------- | ------------- |
| circles | picload/dist/progress-circles.css |
| ring | picload/dist/progress-ring.css |
| ripple | picload/dist/progress-ripple.css |
| spinner | picload/dist/progress-spinner.css |
| roller | picload/dist/progress-roller.css |
-
progress color
> _progressColor : 'color'_
You can set the color of progress
```jsx
const myConfig = {
progress: 'spinner',
progressColor: '#f1f1f1'
}
```
-
progress background
> _progressBg : 'color'_
You can set the background color of progress
```jsx
const myConfig = {
progress: 'spinner',
progressColor: '#f1f1f1',
progressBg: '#0d1117',
}
```
-
progress style
> _progressStyle : {style}_
you can style your progress. For example, you want to make it a little bigger:
```jsx
const myConfig = {
progress: 'spinner',
progressColor: '#f1f1f1',
progressBg: '#0d1117',
progressStyle: {
transform: 'scale(1.2)'
}
}
```
-
custom progress
> _progress : <component />_
Can we add custom progress we made ourselves?
Definitely yes! Just import that component and pass it to progress (in config)
```jsx
import myProgress from './myProgress'
```
```jsx
const myConfig = {
progress: ;
}
```
## Basic attributes
In picload, it is possible to use all basic attributes. These attributes are appended directly to the (img)
> You do not need to define this basic information in (config)
- **style**
```jsx
```
- **ref**
If you have an (Ref) and you want to link it to your image tag, you have to give it to (cref) in Picload
> 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
```jsx
const myImg = React.useRef(null)
```
### Sample
