r-aspect-ratio
v1.0.0React Aspect Ratio
A react component for fixed aspect ratio layout in responsive design.
Usage
Add to your react app
yarn add r-aspect-ratio
Example
class App extends React.Component {
render() {
return (
<div className="App">
<AspectRatio width="16%" ratio={1.6} className="Box" />
<br />
<AspectRatio
width="32%"
ratio={1}
className="Box"
minWidth={100}
maxWidth={160}
/>
</div>
)
}
}
API
AspectRatio Props:
interface IProps {
ratio: number // height to width ratio in float
width?: number | string // px or %
minWidth?: number // px
maxWidth?: number // px
className?: string // className pass to root div
children?: React.ReactNode
}
npm i [email protected]
Source Code
github.com/shadowwalker/reac...Metadata
- MIT
- Whatever
- Wei Wang
- released 3/5/2019