1 | # react-virtualized-auto-sizer
|
2 |
|
3 | Standalone version of the `AutoSizer` component from [`react-virtualized`](https://github.com/bvaughn/react-virtualized).
|
4 |
|
5 | ### If you like this project, 🎉 [become a sponsor](https://github.com/sponsors/bvaughn/) or ☕ [buy me a coffee](http://givebrian.coffee/)
|
6 |
|
7 | ## Install
|
8 |
|
9 | ```bash
|
10 | npm install --save react-virtualized-auto-sizer
|
11 | ```
|
12 |
|
13 | ## Documentation
|
14 |
|
15 |
|
16 | | Property | Type | Required? | Description |
|
17 | | :------------ | :------- | :-------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
18 | | children | Function | ✓ | Function responsible for rendering children. This function should implement the following signature: `({ height: number, width: number }) => PropTypes.element` |
|
19 | | className | String | | Optional custom CSS class name to attach to root `AutoSizer` element. This is an advanced property and is not typically necessary. |
|
20 | | defaultHeight | Number | | Height passed to child for initial render; useful for server-side rendering. This value will be overridden with an accurate height after mounting. |
|
21 | | defaultWidth | Number | | Width passed to child for initial render; useful for server-side rendering. This value will be overridden with an accurate width after mounting. |
|
22 | | disableHeight | Boolean | | Fixed `height`; if specified, the child's `height` property will not be managed |
|
23 | | disableWidth | Boolean | | Fixed `width`; if specified, the child's `width` property will not be managed |
|
24 | | nonce | String | | Nonce of the inlined stylesheets for [Content Security Policy](https://www.w3.org/TR/2016/REC-CSP2-20161215/#script-src-the-nonce-attribute) |
|
25 | | onResize | Function | | Callback to be invoked on-resize; it is passed the following named parameters: `({ height: number, width: number })`. |
|
26 | | style | Object | | Optional custom inline style to attach to root `AutoSizer` element. This is an advanced property and is not typically necessary. |
|
27 | | tagName | string | | Optional HTML tag name for root element; defaults to `"div"` |
|
28 |
|
29 | ## Examples
|
30 |
|
31 | Some components (like those found in [`react-window`](https://github.com/bvaughn/react-virtualized) or [`react-window`](https://github.com/bvaughn/react-virtualized)) require numeric width and height parameters. The `AutoSizer` component can be useful if you want to pass percentage based dimensions.
|
32 |
|
33 | ```jsx
|
34 | import AutoSizer from "react-virtualized-auto-sizer";
|
35 |
|
36 | // UI
|
37 | <AutoSizer>
|
38 | {({ height, width }) => {
|
39 | // Use these actual sizes to calculate your percentage based sizes
|
40 | }}
|
41 | </AutoSizer>;
|
42 | ```
|
43 |
|
44 | ## FAQs
|
45 |
|
46 | ### Can I use this component with flexbox?
|
47 |
|
48 | Flex containers don't prevent their children from growing and `AutoSizer` greedily grows to fill as much space as possible. Combining the two can be problematic. The simple way to fix this is to nest `AutoSizer` inside of a `block` element (like a `<div>`) rather than putting it as a direct child of the flex container, like so:
|
49 |
|
50 | ```jsx
|
51 | <div style={{ display: 'flex' }}>
|
52 | <!-- Other children... -->
|
53 | <div style={{ flex: '1 1 auto' }}>
|
54 | <AutoSizer>
|
55 | {({ height, width }) => (
|
56 | <Component
|
57 | width={width}
|
58 | height={height}
|
59 | {...props}
|
60 | />
|
61 | )}
|
62 | </AutoSizer>
|
63 | </div>
|
64 | </div>
|
65 | ```
|
66 |
|
67 | ### Why is `AutoSizer` passing a height of 0?
|
68 |
|
69 | `AutoSizer` expands to _fill_ its parent but it will not _stretch_ the parent. This is done to prevent problems with flexbox layouts. If `AutoSizer` is reporting a height (or width) of 0- then it's likely that the parent element (or one of its parents) has a height of 0.
|
70 |
|
71 | The solution to this problem is often to add `height: 100%` or `flex: 1` to the parent. One easy way to test this is to add a style property (eg `background-color: red;`) to the parent to visually confirm that it is the expected size.
|
72 |
|
73 | ### Can I use `AutoSizer` to manage only width or height (not both)?
|
74 |
|
75 | You can use `AutoSizer` to control only one dimension of its child component using the `disableHeight` or `disableWidth` attributes. For example, a fixed-height component that should grow to fill the available width can be created like so:
|
76 |
|
77 | ```jsx
|
78 | <AutoSizer disableHeight>
|
79 | {({width}) => <Component height={200} width={width} {...props} />}
|
80 | </AutoSizer>
|
81 | ```
|
82 |
|
83 |
|
84 | ### Module parsing fails because of an unexpected token?
|
85 |
|
86 | This package targets [ECMAScript 2015](https://262.ecma-international.org/6.0/) (ES6) and requires a build tool such as [babel-loader](https://www.npmjs.com/package/babel-loader) that is capable of parsing the ES6 `class` syntax.
|
87 |
|
88 | ### Can this component work with a Content Security Policy?
|
89 |
|
90 | [The specification of Content Security Policy](https://www.w3.org/TR/2016/REC-CSP2-20161215/#intro)
|
91 | describes as the following:
|
92 |
|
93 | > This document defines Content Security Policy, a mechanism web applications
|
94 | > can use to mitigate a broad class of content injection vulnerabilities, such
|
95 | > as cross-site scripting (XSS).
|
96 |
|
97 | To apply Content Security Policy, pass a `nonce` to `AutoSizer` and add a matching `nonce-source` to the `Content-Security-Policy` field in HTTP header.
|