@react-md/media
TypeScript icon, indicating that this package has built-in type declarations

5.1.6 • Public • Published

@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"));

Package Sidebar

Install

npm i @react-md/media

Weekly Downloads

1,075

Version

5.1.6

License

MIT

Unpacked Size

53.7 kB

Total Files

35

Last publish

Collaborators

  • mlaursen