⚠️ 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 is a library with the goal to provide easy to use, portable and fast media components for your React app.
- 🌄 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.
npm install react-media-components
# or
yarn add react-media-components
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>
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
}
}
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.
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 %. |
You can apply any known img attributes.
Attributes | Type | Default | Description |
---|---|---|---|
src | string |
null |
The path to your image. |
More custom props coming soon... |
Big thanks to all our contributors who made this projcect possible.