react-ideal-image

    0.0.5 • Public • Published

    react-ideal-image

    Adaptive image component


    Build Status Code Coverage version downloads MIT License

    All Contributors PRs Welcome Code of Conduct

    Watch on GitHub Star on GitHub Tweet

    The problem

    I need React component to asynchronously load images, which will adapt based on network, which will allow a user to control, which image to load.

    This solution

    Read the introduction.

    Table of Contents

    Installation

    This module is distributed via npm which is bundled with node and should be installed as one of your project's devDependencies:

    npm install react-ideal-image react-waypoint --save
    

    Usage

    Example for create-react-app (you need v2 for macros) based project

    import React from 'react'
    import lqip from 'lqip.macro'
    import IdealImage from 'react-ideal-image'
     
    import image from './images/doggo.jpg'
    const lqip = lqip('./images/doggo.jpg')
     
    const App = () => (
      <IdealImage
        placeholder={{lqip}}
        srcSet={[{src: image, width: 3500}]}
        alt="doggo"
        width={3500}
        height={2095}
      />
    )

    Other Solutions

    Contributors

    Thanks goes to these people (emoji key):


    stereobooster

    💻 📖 🚇 ⚠️

    Ivan Babak

    📖

    Arun Kumar

    📖

    Andrew Lisowski

    💻

    This project follows the all-contributors specification. Contributions of any kind welcome!

    LICENSE

    Code - MIT

    Icons - Apache License 2.0

    Keywords

    none

    Install

    npm i react-ideal-image

    DownloadsWeekly Downloads

    358

    Version

    0.0.5

    License

    MIT

    Unpacked Size

    60.1 kB

    Total Files

    23

    Last publish

    Collaborators

    • stereobooster