Render HTML img tag with specific aspect ratio with React. for more information, please see: Document
npm i react-aspect-ratio-img
-
AspectRatioImg (
no IE support
)Use AspectRatioFence as wrap element to set the aspect ratio and pass
<img />
element aschildren
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 />
tagchildren 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 aschildren
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 />
tagchildren ReactNode false - Custom children node which as silbing of <img />
tag -
SquareImg
Use SquareFence as wrap element and pass
<img />
element aschildren
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 />
tagchildren ReactNode false - Custom children node which as silbing of <img />
tag
- 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} />
npm install
npm start storybook
- configuration files list in
.storybook
directory - story files list in
.stories
directory
npm run test
__tests__
- unit test running by
jest
- use
test:update
to update jestsnapshot
- unit test running by