@nice-digital/nds-maintain-ratio
TypeScript icon, indicating that this package has built-in type declarations

4.0.8 • Public • Published

@nice-digital/nds-maintain-ratio

Component to maintain the ratio of a contained element

Installation

Install Node, and then:

npm i @nice-digital/nds-maintain-ratio --save

Usage

React

Import the MaintainRatio component from the package and use within JSX:

import React from "react";
import { MaintainRatio } from "@nice-digital/nds-maintain-ratio";

<MaintainRatio ratio="16:9">
	<img src="image.jpg" />
</MaintainRatio>;

Note: The React component automatically imports the SCSS, so there's no need to import the SCSS directly yourself.

Props

ratio
  • Type: string

The ratio to maintain. Defaults to 16:9 if not supplied. Can be one of 16:9, 21:9, 4:3, square and 1:1.

<MaintainRatio ratio="4:3">
	<img src="image.jpg" />
</MaintainRatio>
className
  • Type: string

Any additional class to apply to the container.

<MaintainRatio className="mt--d">
	<img src="image.jpg" />
</MaintainRatio>
stretchFirstChild
  • Type: boolean

Apply CSS to the first child of the component to make it fill the container.

<MaintainRatio stretchFirstChild={true}>
	<img src="image.jpg" />
</MaintainRatio>
children
  • Type: React.ReactNode

The content to maintain the ratio of. Expects, but isn't limited to, a single element. In most cases would be the video or img to maintain the aspect of.

<MaintainRatio>
	<video src="my-video.mp4" contols />
</MaintainRatio>

SCSS

If you're not using React, then import the SCSS directly into your application by:

@forward '@nice-digital/nds-maintain-ratio/scss/maintain-ratio';

HTML

If you're not using React, then include the SCSS as above and use the HTML:

<div class="maintain-ratio maintain-ratio--16-9 maintain-ratio--stretch">
	<img src="image.jpg" />
</div>

Readme

Keywords

none

Package Sidebar

Install

npm i @nice-digital/nds-maintain-ratio

Weekly Downloads

90

Version

4.0.8

License

MIT

Unpacked Size

8.85 kB

Total Files

6

Last publish

Collaborators

  • wongcheming
  • johndavey72
  • barkertron
  • martingallagher1980
  • ditprogrammatic
  • ediblecode
  • josealmeida
  • mark-nice
  • nansenst
  • colin.mazurkiewicz
  • imranazad
  • eleanormollett