⚠️ The functionality described in this README will be available with v1.0.0
This is a WIP! API and features may change

React Media Components

React Media Components is a library with the goal to provide easy to use, portable and fast media components for your React app.

Key features

• 🌄 Image component to render images in a picture tag with all the required formats and sizes.

Coming soon

• 🎬 Video component to render videos with a video tag using next gen formats and different resolutions.
• 🔊 Audio component to render audio files in an audio tag using next gen formats and different sound qualities.

Installation

npm install react-media-components
# or
yarn add react-media-components

Usage

To use the image component you can simply import it and use it inside your components return statement. You can use sizes and formats props to render the image in the formats and sizes you need. You can also apply any known img attributes you want, like for example the alt or style attribute.

import { Image } from "react-media-components";

const YourComponent = () => {
  return (
    // v1.0.0 (sizes, formats and quality are set via config file)
    <Image src="/path/to/image.png" />
  );
};

The example from above renders the following HTML:

<picture>
  <source media="(min-width:1024px)" srcset="image-1200.avif" type="image/avif" />
  <source media="(min-width:1024px)" srcset="image-1200.webp" type="image/webp" />

  <source media="(min-width:768px)" srcset="image-1024.avif" type="image/avif" />
  <source media="(min-width:768px)" srcset="image-1024.webp" type="image/webp" />

  <source media="(min-width:414px)" srcset="image-768.avif" type="image/avif" />
  <source media="(min-width:414px)" srcset="image-768.webp" type="image/webp" />

  <source srcset="image-414.avif" type="image/avif" />
  <img src="image-414.webp" alt="foobar" />
</picture>

Config

Default config

Out of the box the default configurations from the code block below are applied.

{
  "image": {
    "sizes": {
      "0": "414", // screens from 0px to 414px will have image of 414px
      "414": "768", // screens from 414px to 768px will have image of 768px
      "768": "1024", // screens from 768px to 1024px will have image of 1024px
      "1024": "1200", // screens from 1024px to 1200px will have image of 1200px
      "1200": "1920" // screens from 1200px to ∞px will have image of 1920px
    },
    "formats": ["AVIF", "WebP"],
    "quality": 70
  }
}

Custom config

We use cosmiconfig to fetch your custom config. This means you can add your custom config by adding a rmcrc property in your package.json or by creating a rmcrc.json file in your project root directory. Other config file types/names are also possible as described in the cosmiconfig readme.

Options

Key	Type	Default	Description
image.sizes	{ string: string }	{ "0": "414", "414": "768", "768": "1024", "1024": "1200", "1200": "1920" }	The breakpoints and the associated image widths. The key is the breakpoint and the value is the image width. The images are loaded in the specified image width as soon as the specified breakpoint is reached. For example the following config { "980": "900" } will render 900px wide images for screens that are 980px wide or bigger.
image.formats	["APNG", "AVIF", "GIF", "JPEG", "PNG", "WebP", "SRC_TYPE"]	["AVIF", "Webp"]	The image file types your images will be rendered in. To use the original file type you provided in the src attribute you can use SRC_TYPE.
image.quality	number	70	The quality your images will be rendered in. With 70% you save a lot of data without any noticable quality differences. If you don't want to compress your images at all you can set the value to 100%.

Props

You can apply any known img attributes.

Attributes	Type	Default	Description
src	string	null	The path to your image.
			More custom props coming soon...

Contributors

Big thanks to all our contributors who made this projcect possible.