Picload

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

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=>
      <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 … ```jsx 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;

<hr>

- <h3>Random color</h3>
> _randomColor : 'color'_

Before loading images, place a random color in the selected range (dark & light & any) instead of the image <br>
The randomColor value should be the color range you want

- **usage** <br>
```jsx
const myConfig = {
    randomColor: 'dark'
}
<Picload src={Lorem} config={myConfig} />
// or
<Picload src={Lorem} config= />

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

<Picload src={linux} config= />

<hr>

- <h3>Progress</h3>
> _progress : 'progress type'_

Beautiful animations, before the image is loaded

- **usage** <br>
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

<Picload src={linux} config= />

• 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' />