React Sorcerer

React Sorcerer is a react component and companion hook that helps you use source sets for your img tags.

Source sets work by using a set of image sources to allow the browser to make a calculated decision and display the most optimal image for the current screen size. They increase site performance, and save your users bandwidth. They are like the Goldilocks of image optimization.

Demo

Install

yarn add react-sorcerer

Use as a Component

import { Sorcerer } from 'react-sorcerer';

<Sorcerer
  alt="an image"
  coverage={100}
  src="https://dummyimage.com/1024x800/f00/fff"
  srcSetData={[
    {
      src: 'https://dummyimage.com/300x200/f00/fff',
      width: 300,
    },
    {
      src: 'https://dummyimage.com/400x300/f00/fff',
      width: 400,
    },
    {
      src: 'https://dummyimage.com/800x600/f00/fff',
      width: 800,
    },
    {
      src: 'https://dummyimage.com/1100x800/f00/fff',
      width: 1100,
    },
  ]}
/>;

Use as a Hook

import { useSorcerer } from 'react-sorcerer';

const imgSrcData = useSorcerer({
  alt: 'an image',
  coverage: 100,
  src: 'https://dummyimage.com/1024x800/f00/fff',
  srcSetData: [
    {
      src: 'https://dummyimage.com/300x200/f00/fff',
      width: 300,
    },
    {
      src: 'https://dummyimage.com/400x300/f00/fff',
      width: 400,
    },
    {
      src: 'https://dummyimage.com/800x600/f00/fff',
      width: 800,
    },
    {
      src: 'https://dummyimage.com/1100x800/f00/fff',
      width: 1100,
    },
  ],
});

<img {...imgSrcData} />;

Note: The coverage prop is used to help the browser determine which image to use at each screen size based on the image's width. A full width image would have a coverage of 100. An image in a 4 column grid might have a coverage of 25.

Props

| Name | Type | Required | Description | | ---------- | ---------------------------------- | -------- | ----------------------------------------------------------- | | alt | string | true | alt tag for the image | | className | string | false | className for the image | | coverage | number | true | an estimate of the display width of the image in percentage | | src | string | true | the src of the main image | | srcSetData | { src: string, width: number }[] | true | an array of image sources and their width in pixels | | style | object | false | style object for the image |

License

MIT

Copyright (c) 2017 Bryan Brophy.