@react-spectre/media

React components for Spectre.css's media elements

Installation

yarn add @react-spectre/media

npm install @react-spectre/media --save

Usage

Media

There are 4 components used for media elements: Image, Figure, Video and Container¹.

import { Image, Figure, Video, Container } from '@react-spectre/media'

Notes: ¹ Container is an alias for Video.Container.

Image

An Image can have different styling using responsive, contain and cover props.

<Image src="..." />
<Image src="..." responsive />
<Image src="..." contain />
<Image src="..." cover />

Figure

An Image can be rendered inside a Figure.

<Figure caption="A cool picture" captionAlignment="center">
  <Image src="..." />
</Figure>

The captionAlignment can have one of the following values: left, center or right.

Video

A Video can have different aspect ratio using responsive prop.

<Video responsive /> // Defaults is "16:9"
<Video responsive="1:1" />
<Video responsive="4:3" />

The responsive prop can have one fo the following values: 1:1, 4:3 or 16:9.

Container

A Video or <iframe /> can be rendered inside a Container.

<Video.Container responsive> 
  <iframe src="https://www.youtube.com/embed/BzMLA8YIgG0" />
</Video.Container>

The responsive prop can have one fo the following values: 1:1, 4:3 or 16:9.

Made with ❤️ by Rubens Mariuzzo.

MIT License