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={{width: '80px', height: '80px'}}>
      <Picload src={myPicture} placeholder={myPicture_min} alt='picture' className='my-image'/>
    </div>
  )
};

export default App;

options

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;

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'

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

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

progressColor : 'color'

You can set the color of progress

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

progressBg : 'color'

You can set the background color of progress

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

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} />

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