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
const uc = require('react-aspect-ratio-fence')
require('react-aspect-ratio-fence/css/style.css')
<uc.AspectRatioFence {...props} />
<uc.SquareFence {...props} />
const AspectRatioFence = require('react-aspect-ratio-fence/lib/components/AspectRatioFence')
require('react-aspect-ratio-fence/css/components/AspectRatioFence/style.css')
<AspectRatioFence {...props} />
import { AspectRatioFence, SquareFence } from 'react-aspect-ratio-fence'
import 'react-aspect-ratio-fence/css/style.css'
<AspectRatioFence {...props} />
<SquareFence {...props} />
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