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
`js
// import from package entry point
const uc = require('react-aspect-ratio-fence')
require('react-aspect-ratio-fence/css/style.css')



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


`

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



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


`

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`