react-aspect-ratio-fence

for more information, please see: Document

Installation

npm i react-aspect-ratio-fence

Components

• AspectRatioFence (no IE support)

  Set ratio as css custom properties, and calc() the height of elementType's pseudo-element as placeholder. The defailt style will fit the children node into the placeholer.

  | props | type | required | default | description | | --- | --- | --- | --- | --- | | elementType | string | false | div | html tag name for the wrap component | | ratio | number | true | 1 | The aspect ratio of an image describes the proportional relationship between width and height | | className | string | false | undefined | Custom class name | | children | ReactNode | false | undefined | custom children node |

• AspectRatioFenceLegacy

  Caculate the height of innerElementType base on the width of outerElementType and ratio. The defailt style will fit the children node into the placeholer.

  | props | type | required | default | description | | --- | --- | --- | --- | --- | | outerElementType | string | false | div | html tag name for the outer component | | innerElementType | string | false | div | html tag name for the inner component | | ratio | number | true | 1 | The aspect ratio of an image describes the proportional relationship between width and height | | className | string | false | undefined | Custom class name | | children | ReactNode | false | undefined | custom children node |

• SquareFence

  Set height of elementType's pseudo-element to the value of elementType's width. The defailt style will fit the children node into the placeholer.

  | props | type | required | default | description | | --- | --- | --- | --- | --- | | elementType | string | false | div | html tag name for the wrap component | | className | string | false | undefined | Custom class name | | children | ReactNode | false | undefined | custom children node |

Way to Ride

• Common jS

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

  <uc.AspectRatioFence {...props} />
  <uc.SquareFence {...props} />

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

  <AspectRatioFence {...props} />

• ESM

// import from package entry point
import { AspectRatioFence, SquareFence } from 'react-aspect-ratio-fence'
import 'react-aspect-ratio-fence/css/style.css'

  <AspectRatioFence {...props} />
  <SquareFence {...props} />

// only import specific component
import AspectRatioFence from 'react-aspect-ratio-fence/es/components/AspectRatioFence'
import 'react-aspect-ratio-fence/css/components/AspectRatioFence/style.css'

  <AspectRatioFence {...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