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 ofelementType
's pseudo-element as placeholder. The defailt style will fit thechildren
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 ofouterElementType
andratio
. The defailt style will fit thechildren
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 ofelementType
's width. The defailt style will fit thechildren
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 jestsnapshot
- unit test running by