react-aspect-ratio-img

react-aspect-ratio-img

Render HTML img tag with specific aspect ratio with React. for more information, please see: Document

Installation

npm i react-aspect-ratio-img

Components

• AspectRatioImg (no IE support)

  Use AspectRatioFence as wrap element to set the aspect ratio and pass <img /> element as children props into it.

  props	type	required	default	description
  outerElementType	string	false	div	html tag name of the wrap component
  ratio	number	true	1	The aspect ratio of an image describes the proportional relationship between width and height
  className	string	false	-	Custom class name of the wrap component
  src	string	true	-	The URL of an image
  imgAttributes	object	false	-	The attributes of <img /> tag
  children	ReactNode	false	-	Custom children node which as silbing of <img /> tag

• AspectRatioImgLegacy

  Use AspectRatioFenceLegacy as wrap element to set the aspect ratio and pass <img /> element as children props into it.

  props	type	required	default	description
  outerElementType	string	false	div	html tag name of the outer component
  innerElementType	string	false	div	html tag name of the inner component
  ratio	number	true	1	The aspect ratio of an image describes the proportional relationship between width and height
  className	string	false	-	Custom class name of the wrap component
  src	string	true	-	The URL of an image
  imgAttributes	object	false	-	The attributes of <img /> tag
  children	ReactNode	false	-	Custom children node which as silbing of <img /> tag

• SquareImg

  Use SquareFence as wrap element and pass <img /> element as children props into it.

  props	type	required	default	description
  outerElementType	string	false	div	html tag name of the wrap component
  className	boolean	false	-	Custom class name of the wrap component
  src	string	true	-	The URL of an image
  imgAttributes	object	false	-	The attributes of <img /> tag
  children	ReactNode	false	-	Custom children node which as silbing of <img /> tag

Way to Ride

• Common jS

// import from package entry point
const uc = require('react-aspect-ratio-img')
require('react-aspect-ratio-img/css/style.css')

  <uc.AspectRatioImg {...props} />
  <uc.SquareImg {...props} />

// only import specific component
const AspectRatioImg = require('react-aspect-ratio-img/lib/components/AspectRatioImg')
require('react-aspect-ratio-img/css/components/AspectRatioImg/style.css')

  <AspectRatioImg {...props} />

• ESM

// import from package entry point
import { AspectRatioImg, SquareImg } from 'react-aspect-ratio-img'
import 'react-aspect-ratio-img/css/style.css'

  <AspectRatioImg {...props} />
  <SquareImg {...props} />

// only import specific component
import AspectRatioImg from 'react-aspect-ratio-img/es/components/AspectRatioImg'
import 'react-aspect-ratio-img/css/components/AspectRatio/style.css'

  <AspectRatioImg {...props} />

Development by storybook

npm install
npm start storybook

• configuration files list in .storybook directory
• story files list in .stories directory

Test with Jest and Puppeteer

npm run test

• __tests__
  • unit test running by jest
  • use test:update to update jest snapshot