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
• options
  • Placeholder
  • Random Color
    • dark
    • light
    • any
  • Color
  • Progress
    • circles
    • ring
    • ripple
    • spinner
    • roller
    • progressColor
    • progressBg
    • ProgressStyle
    • custom
• Basic attributes
  • style
  • className
  • alt
  • ref
  • loading
• Sample

Install

Install Picload with npm

  npm i picload

  import Picload from 'picload'

Example Usage

After installation, import it and take advantage of its capabilities

import Picload from 'picload'
import myPicture from './images/picture.png'
import myPicture_min from './images/picture_min.png'

const App = () => {
  return (
    <div style={{width: '80px', height: '80px'}}>
      <Picload src={myPicture} placeholder={myPicture_min} alt='picture' className='my-image'/>
    </div>
  )
};

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 ...

import Picload from 'picload';
import Mountain from './images/mountain.jpeg';
import Mountin_min from './images/mountin_min.jpeg';

const App = () => {
    return(
        <div>
            <Picload src={Mountain} placeholder={Mountin_min} />
        </div>
    )
};

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
  

const myConfig = {
    randomColor: 'dark'
}
<Picload src={Lorem} config={myConfig} />
// or
<Picload src={Lorem} config={{randomColor: 'any'}} />

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
  

<Picload src={linux} config={{ color: '#212526' }} />

---

• 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

import "picload/dist/progress-ripple.css"

Now you can use it

<Picload src={linux} config={{ progress: 'circles' }} />

• 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

const myConfig = {
  progress: 'spinner',
  progressColor: '#f1f1f1'
}
<Picload src={myImage} config={myConfig} />

• progress background

progressBg : 'color'

You can set the background color of progress

const myConfig = {
  progress: 'spinner',
  progressColor: '#f1f1f1',
  progressBg: '#0d1117',
}
<Picload src={myImage} config={myConfig} />

• progress style

progressStyle : {style}

you can style your progress. For example, you want to make it a little bigger:

const myConfig = {
  progress: 'spinner',
  progressColor: '#f1f1f1',
  progressBg: '#0d1117',
  progressStyle: {
    transform: 'scale(1.2)'
  }
}
<Picload src={myImage} config={myConfig} />

• 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)

import myProgress from './myProgress'

const myConfig = {
  progress: <myProgress />;
}
<Picload src={Mountain} config={myConfig}/>

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

<Picload ... style={ {transform: 'rotate(5deg)'} } />

• className

<Picload ... className='fw-bold bg-danger' />

• alt

<Picload ... alt='image alt' />

• 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

const myImg = React.useRef(null)

<Picload ... cref={myImg} />

• loading
  

<Picload ... loading='lazy' />

---

Sample