1 | # ScalableRect
|
2 | Container that keeps the specified aspect ratio regardless the width you set.
|
3 |
|
4 | [Code Example](#example),
|
5 | [Live Demo](https://community-app.topcoder-dev.com/examples/scalable-rect)
|
6 |
|
7 | **Why?** — From time to time you need to render an HTML element with
|
8 | a specified aspect ratio of its sizes. HTML/CSS allows to achieve that, but
|
9 | it demands two nested `<div>` elements, and a non-intuitive CSS code. This
|
10 | component hides all technical aspects of that solution under the hood.
|
11 |
|
12 | **Accepted Props:**
|
13 | - **`children`** — *Node* — Optional. Any content you want to render
|
14 | inside the container. Defaults to *null*;
|
15 | - **`className`** — *String* — Optional. The style to be applied to
|
16 | the container itself. When provided, the rendered conainer will be wrapped into
|
17 | an additional `<div>` wrapper, and the style will be applied to that wrapper.
|
18 | Defaults to *null*;
|
19 | - **`ratio`** — *String* — Optional. Size ratio of the rendered
|
20 | rectangle, in `W:H` form. Defaults to `1:1`.
|
21 | - **`styleName`** — *String* — Optional. As an alternative to
|
22 | the `className`, you can pass in `styleName` instead. Babel will convert
|
23 | it to the correct classname, following our setup for CSS modules.
|
24 |
|
25 | ### <a name="example">Example</a>
|
26 | ```scss
|
27 | // style.scss
|
28 |
|
29 | .container {
|
30 | background: red;
|
31 | width: 640px;
|
32 | }
|
33 |
|
34 | .content {
|
35 | background: blue;
|
36 | height: 100%;
|
37 | margin: 10px;
|
38 | width: 100;
|
39 | }
|
40 | ```
|
41 |
|
42 | ```js
|
43 | // index.scss
|
44 |
|
45 | import React from 'react';
|
46 | import { ScalableRect } from 'topcoder-react-utils';
|
47 |
|
48 | import './style.scss';
|
49 |
|
50 | export default function Example() {
|
51 | return (
|
52 | <ScalableRect styleName="container" ratio="4:3">
|
53 | <div styleName="content" />
|
54 | </ScalableRect>
|
55 | );
|
56 | }
|
57 | ```
|