Skip to content
Tiny (2.3kB) React component for image lazy loading
JavaScript
Branch: master
Clone or download
Latest commit e1c05e9 May 8, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo/src
docs Build docs May 8, 2019
src Fixup responsive images May 8, 2019
tests Initial commit from nwb v0.23.0 May 8, 2019
.editorconfig Initial commit May 8, 2019
.eslintrc Initial commit May 8, 2019
.gitignore Build demo May 8, 2019
.travis.yml Initial commit from nwb v0.23.0 May 8, 2019
CONTRIBUTING.md Initial commit from nwb v0.23.0 May 8, 2019
README.md Update README.md May 8, 2019
nwb.config.js Initial commit from nwb v0.23.0 May 8, 2019
package.json 1.0.2 May 8, 2019
react-pics.png Initial commit May 8, 2019
yarn.lock Initial commit May 8, 2019

README.md

React Pics

Tiny (2.3kB) React component for image lazy loading

Demo

Table of Contents

Installation

npm install react-pics --save

or install with Yarn if you prefer:

yarn add react-pics

Usage

Basic

Place your image component as a child to <Pic> and it will handle the lazy loading for you.

Note: by default, <Pic> renders a <picture> component. To change this, you can add a custom component with the use prop.

import Pic from 'react-pics';

function MyPics() {
  return (
    <Pic>
      <img src="/my-image-high-res.jpg" />
    </Pic>
  )
}

With a placeholder

Give the placeholder component your image:

import Pic from 'react-pics';

function MyPics() {
  return (
    <Pic placeholder={<img src="/my-image-low-res.jpg" />}>
      <img src="/my-image-high-res.jpg" />
    </Pic>
  )
}

Responsive images

The <Pics> inherits the nature of the <picture> component. You can render different images for certain viewports using the <source> component.

import Pic from 'react-pics';

function MyPics() {
  return (
    <Pic placeholder={<img src="/my-image-low-res.jpg" />}>
      <source media="(max-width: 480px)" src="/my-image-480w.jpg" />
      <source media="(max-width: 720px)" src="/my-image-720w.jpg" />
      <source media="(max-width: 1024px)" src="/my-image-1024w.jpg" />
      <img src="/my-image-high-res.jpg" />
    </Pic>
  )
}

Props on <Pic>

You can add HTML props to <Pic> if you wish:

import Pic from 'react-pics';

function MyPics() {
  return (
    <Pic style={{ width: '100%' }}>
      <img src="/my-image-high-res.jpg" />
    </Pic>
  )
}
import Pic from 'react-pics';
import styled from 'styled-components';

const AwesomePic = styled(Pic)`
  height: 100%
`;

function MyPics() {
  return (
    <AwesomePic>
      <img src="/my-image-high-res.jpg" />
    </AwesomePic>
  )
}

<Pic> props

use

string | Element<any> | Optional | Default: "picture"

Replaces the default <picture> component with something else.

Example

function MyPics() {
  return (
    <Pic use="div">
      <img src="/my-image-high-res.jpg" />
    </Pic>
  )
}

placeholder

Element<"img"> | Optional

Add a placeholder image to use while the image loads.

import Pic from 'react-pics';

function MyPics() {
  return (
    <Pic placeholder={<img src="/my-image-low-res.jpg" />}>
      <img src="/my-image-high-res.jpg" />
    </Pic>
  )
}

License

MIT © Medipass Solutions Pty. Ltd.

You can’t perform that action at this time.