react-tile-layout
v0.1.6
Published
React-Tile-Layout is a grid layout for dynamically configurable tiles which is based on [React-Grid-Layout](https://npmjs.com/package/react-grid-layout)
Downloads
11
Readme
React-Tile-Layout
React-Tile-Layout is a grid layout for dynamically configurable tiles which is based on React-Grid-Layout
Installation
Install the React-Tile-Layout package:
npm install react-grid-layout
Include the following stylesheets in your application:
/node_modules/react-grid-layout/css/styles.css
/node_modules/react-resizable/css/styles.css
Usage
import React from "react";
import { TileLayout, Tile, ReactTileLayout } from "react-tile-layout";
const breakpoints = { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 };
const cols = { lg: 12, md: 10, sm: 8, xs: 6, xxs: 4 };
export default function App() {
return (
<TileLayout
tileComponent={TileComponent}
breakpoints={breakpoints}
cols={cols}
>
<Tile name="Tile 1" layout={{ w: 2, h: 1, static: true }} />
<Tile name="Tile 2" layout={{ w: 2, h: 2, minW: 1, maxW: 2 }} />
<Tile name="Tile 3" layout={{ w: 1, h: 1 }} someProp="Hello" />
<Tile name="Tile 4" layout={{ w: 1, h: 1 }} disabled />
</TileLayout>
);
}
const TileComponent = React.forwardRef(
(
{
name,
layoutSpec,
props: { someProp },
children,
...rest
}: ReactTileLayout.TileComponentProps,
ref: React.Ref<HTMLDivElement>
) => {
return (
<div
{...rest}
style={{
...rest.style,
border:
layoutSpec.static || layoutSpec.isDraggable === false
? "1px solid blue"
: "1px solid red",
}}
ref={ref}
>
{children}
{name} - {someProp || "default"}
</div>
);
}
);
You can find a working example on GitHub.
Simply clone the project and run the following commands:
npm install
npm start