# react-aspect-ratio-fence > Set Custom Aspect Ratio to the Wrap Element(fence) Latest version **1.8.5** (published 2021-02-21) · ISC license · 0 weekly downloads ## Install ```sh npm install react-aspect-ratio-fence pnpm add react-aspect-ratio-fence yarn add react-aspect-ratio-fence bun add react-aspect-ratio-fence ``` ## Health **Score 30/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities; high quality score. Warnings: low downloads. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.8.5 | | Published | 2021-02-21 | | First published | 2019-07-25 | | Weekly downloads | 0 | | License | ISC | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 0 | | Unpacked size | 33 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 0 | | Author | danhuang | | Maintainers | danhuang1202 | | Keywords | react, aspect ratio, square | ## Links - npm: https://www.npmjs.com/package/react-aspect-ratio-fence - Repository: https://github.com/danhuang1202/react-aspect-ratio-fence - Homepage: https://github.com/danhuang1202/react-aspect-ratio-fence#readme - Issues: https://github.com/danhuang1202/react-aspect-ratio-fence/issues - npm.io page: https://npm.io/package/react-aspect-ratio-fence ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 1.8.5 (latest) — 2021-02-21 - 0.0.0 (current) — 2019-07-25 - 1.8.4 — 2019-10-13 - 1.8.3 — 2019-09-11 - 1.8.2 — 2019-08-20 - 1.8.1 — 2019-07-28 - 1.8.0 — 2019-07-26 - 1.7.0 — 2019-07-26 - 1.5.0 — 2019-07-26 - 1.2.0 — 2019-07-25 - 1.1.0 — 2019-07-25 - 1.0.0 — 2019-07-25 ## README # react-aspect-ratio-fence [![Build Status](https://travis-ci.org/danhuang1202/react-aspect-ratio-fence.svg?branch=master)](https://travis-ci.org/danhuang1202/react-aspect-ratio-fence) [![codecov](https://codecov.io/gh/danhuang1202/react-aspect-ratio-fence/branch/master/graph/badge.svg)](https://codecov.io/gh/danhuang1202/react-aspect-ratio-fence) [![NPM version](https://img.shields.io/npm/v/react-aspect-ratio-fence.svg)](https://www.npmjs.com/package/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](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties), and [calc()](https://developer.mozilla.org/en-US/docs/Web/CSS/calc) the height of `elementType`'s [pseudo-element](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) 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](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) 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` --- _Source: https://npm.io/package/react-aspect-ratio-fence · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._