2.1.1 • Published 3 years ago
react-aspect-ratio-img v2.1.1
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 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 />
tagAspectRatioImgLegacy
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 />
tagSquareImg
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
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 jestsnapshot
- unit test running by