@react-md/media

@react-md/media

This package is used for adding responsive media within your page such as images and videos. Unlike other react-md packages, this package does not include a theme.

Installation

npm install --save @react-md/media

Documentation

You should check out the full documentation for live examples and more customization information, but an example usage is shown below.

Usage

import { render } from "react-dom";
import { MediaContainer, MediaOverlay } from "@react-md/media";

const App = () => (
  <div>
    <MediaContainer className="responsive-item">
      <img
        src="https://picsum.photos/400/400?random"
        role="presentation"
        alt="An image from https://picsum.photos"
      />
    </MediaContainer>
    <Media height={9} width={16}>
      <iframe
        src="https://www.youtube.com/embed/kyAn3fSs8_A"
        allowFullScreen
        frameBorder="0"
      />
    </MediaContainer>
    <MediaContainer height={9} width={16}>
      <img
        src="https://picsum.photos/800/800?image=430"
        role="presentation"
        alt="A random picture from https://picsum.photos"
      />
      <MediaOverlay position={position}>
        <h5>This is a random picture!</h5>
      </MediaOverlay>
    </MediaContainer>
  </div>
);

render(<App />, document.getElementById("root"));

Changelog

5.1.6 (2023-12-11)

Bug Fixes

• @react-md/chip: add overflow to support font icons (da44bbd), closes #1432
• select: port fixed positioning fixes back from v6.0.0 (feb9ec6), closes #1461

Documentation

• react-md.dev: update blog to include additional releases (b305882)