react-pre-hooksuseGridLayout
Track the number of rows and columns of a grid layout using this hook.
Parameters
- the
refobject of the target element.
Return Values
| Name | Type | Description |
|---|---|---|
| ref | RefObject | the target element reference. |
| rows | Number | the grid rows number. |
| columns | Number | the grid columns number. |
Example Usage
tsx
import { useGridLayout } from 'react-pre-hooks';
export default function Example() {
const { ref, rows, columns } = useGridLayout();
return (
<main>
<p>
Rows: {rows}, Columns: {columns}
</p>
<div ref={ref} style={{ display: 'grid' }}>
{new Array(12).fill(null).map((_, i) => (
<span key={i}></span>
))}
</div>
</main>
);
}import { useGridLayout } from 'react-pre-hooks';
export default function Example() {
const { ref, rows, columns } = useGridLayout();
return (
<main>
<p>
Rows: {rows}, Columns: {columns}
</p>
<div ref={ref} style={{ display: 'grid' }}>
{new Array(12).fill(null).map((_, i) => (
<span key={i}></span>
))}
</div>
</main>
);
}