A responsive grid layout for React apps.
The minimal API is to create a clarity-react-responsive-grid-layout
, populate it with an array of card components, and add the desired card width and padding between cards.
npm clarity-react-responsive-grid-layout
- Responsive grid layout for cards.
react
react-dom
import React from "react";
import GridLayout from "clarity-react-responsive-grid-layout";
import {TestCard} from "../../../components";
import styles from "./styles";
const TestComponent = props => {
const { style } = props;
const createCardComponents = () => {
return [<TestCard />, <TestCard />, <TestCard />, <TestCard />, <TestCard />];
};
return (
<div style={Object.assign({}, styles.container, style)}>
<GridLayout style={styles.gridLayout} cardWidth={400} padding={24} cards={createCardComponents()} />
</div>
);
};
export default TestComponent;
- The desired width for all cards.
- The desired padding between cards.
- NOTE: Padding on top, bottom, left and right of gridLayout should be set through the style prop.
- The array of card components that will be rendered in order on the gridLayout.
- Align the cards to the left side of the grid.
- NOTE: If not supplied the default is to center the cards on the grid.