Wondering what’s next for npm?Check out our public roadmap! »

    react-fitted-image

    1.0.1 • Public • Published

    Total Downloads Latest Release License

    react-fitted-image

    Pictures are always difficult to handle in web page, especially in a responsive way. A well-known workaround is to style the img tag with something like this:

    img {
      max-width: 100%;
      height: auto;
    }

    This method works well, but there is a lot of cases where it's not sufficient. Fortunately CSS introduced some times ago the "object-fit" property, improving the way we can handle image displaying. The current component provides an easy react binding to display images with object-fit property.

    In addition, you can provide a loader which will be displayed during the image processing by the browser.

    Object-fit is well supported by browsers but not all of them for now ( see Caniuse ). To work on stuffs like IE, a basic test is done with CSS.supports to provide a fallback based on "background" CSS property.

    Demo

    http://alexjoffroy.github.io/react-fitted-image/example/

    Usage

    Install

    npm install --save react-fitted-image
    

    Properties

    Property Type Description Default value Required
    background bool Force the component to use the CSS bacground properties false no
    className string Custom classname for the component _ no
    fit string Value of the object-fit property. Can be "auto", "contain", or "cover" "auto" no
    loader element Component to use as loader _ no
    onLoad function Success callback for image loading _ no
    onError function Error callback for image loading _ no
    src string Image url to render _ yes
    style object Custom styles {} no

    Example

    <FittedImage
      fit="contain"
      loader={<div>Loading</div>}
      onLoad={(...args) => console.log(...args)}
      onError={(...args) => console.log(...args)}
      src="public/img.jpg"
    />

    Install

    npm i react-fitted-image

    DownloadsWeekly Downloads

    110

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    19.1 kB

    Total Files

    12

    Last publish

    Collaborators

    • avatar