├── .gitignore
├── .vscode
└── settings.json
├── README.md
├── package-lock.json
├── package.json
├── public
├── favicon.ico
├── index.html
├── logo192.png
├── logo512.png
├── manifest.json
└── robots.txt
├── src
├── App.css
├── App.js
├── App.test.js
├── ReactGridLayout.jsx
├── index.css
├── index.js
├── reportWebVitals.js
└── setupTests.js
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | "editor.formatOnSave": true
3 | }
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Building Customizable Dashboard Widgets Using React Grid Layout
2 |
3 | This dashboard contains widgets which can be draggable to any size and also can be placed anywhere in the dashboard.
4 |
5 |
6 | ## Demo
7 | 
8 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-grid-layout-demo",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@testing-library/jest-dom": "^5.11.4",
7 | "@testing-library/react": "^11.1.0",
8 | "@testing-library/user-event": "^12.1.10",
9 | "react": "^17.0.2",
10 | "react-dom": "^17.0.2",
11 | "react-grid-layout": "^1.2.5",
12 | "react-scripts": "4.0.3",
13 | "web-vitals": "^1.0.1"
14 | },
15 | "scripts": {
16 | "start": "react-scripts start",
17 | "build": "react-scripts build",
18 | "test": "react-scripts test",
19 | "eject": "react-scripts eject"
20 | },
21 | "eslintConfig": {
22 | "extends": [
23 | "react-app",
24 | "react-app/jest"
25 | ]
26 | },
27 | "browserslist": {
28 | "production": [
29 | ">0.2%",
30 | "not dead",
31 | "not op_mini all"
32 | ],
33 | "development": [
34 | "last 1 chrome version",
35 | "last 1 firefox version",
36 | "last 1 safari version"
37 | ]
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antstackio/react-grid-layout/b3212f909153e6280188b74da82309d69cff0a45/public/favicon.ico
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
17 |
18 |
27 | React App
28 |
29 |
30 |
31 |
32 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antstackio/react-grid-layout/b3212f909153e6280188b74da82309d69cff0a45/public/logo192.png
--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antstackio/react-grid-layout/b3212f909153e6280188b74da82309d69cff0a45/public/logo512.png
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
1 | .App {
2 | text-align: center;
3 | }
4 |
5 | .react-grid-layout {
6 | position: relative;
7 | transition: height 200ms ease;
8 | }
9 |
10 | .reactGridItem {
11 | display: flex;
12 | align-items: center;
13 | justify-content: center;
14 | transition: all 200ms ease;
15 | transition-property: left, top;
16 | background: rgba(0, 132, 255, 0.473);
17 | font-family: Arial, Helvetica, sans-serif;
18 | text-align: center;
19 | }
20 | .deleteButton {
21 | position: absolute;
22 | top: 0%;
23 | left: 92%;
24 | background: transparent;
25 | border: none;
26 | font-size: 18px;
27 | cursor: pointer;
28 | }
29 |
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import ReactGridLayout from "./ReactGridLayout";
2 | import React from "react";
3 |
4 | function App() {
5 | return (
6 |
7 |
8 |
9 | );
10 | }
11 |
12 | export default App;
13 |
--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
1 | import { render, screen } from '@testing-library/react';
2 | import App from './App';
3 |
4 | test('renders learn react link', () => {
5 | render();
6 | const linkElement = screen.getByText(/learn react/i);
7 | expect(linkElement).toBeInTheDocument();
8 | });
9 |
--------------------------------------------------------------------------------
/src/ReactGridLayout.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import { Responsive, WidthProvider } from "react-grid-layout";
3 | import "react-grid-layout/css/styles.css";
4 | import "react-resizable/css/styles.css";
5 |
6 | import "./App.css";
7 |
8 | const ResponsiveReactGridLayout = WidthProvider(Responsive);
9 |
10 | const ReactGridLayout = () => {
11 | const [layouts, setLayouts] = useState(null);
12 | const [widgetArray, setWidgetArray] = useState([
13 | { i: "widget1", x: 0, y: 0, w: 2, h: 2 },
14 | { i: "widget2", x: 2, y: 2, w: 2, h: 2 },
15 | { i: "widget3", x: 4, y: 4, w: 2, h: 2 },
16 | ]);
17 |
18 | const handleModify = (layouts, layout) => {
19 | const tempArray = widgetArray;
20 | setLayouts(layout);
21 | layouts?.map((position) => {
22 | tempArray[Number(position.i)].x = position.x;
23 | tempArray[Number(position.i)].y = position.y;
24 | tempArray[Number(position.i)].width = position.w;
25 | tempArray[Number(position.i)].height = position.h;
26 | });
27 | setWidgetArray(tempArray);
28 | };
29 |
30 | const handleAdd = () => {
31 | setWidgetArray([
32 | ...widgetArray,
33 | { i: "widget" + (widgetArray.length + 1), x: 0, y: 0, w: 2, h: 2 },
34 | ]);
35 | };
36 |
37 | const handleDelete = (key) => {
38 | const tempArray = widgetArray.slice();
39 | const index = tempArray.indexOf(tempArray.find((data) => data.i === key));
40 | tempArray.splice(index, 1);
41 | setWidgetArray(tempArray);
42 | };
43 |
44 | return (
45 |
46 |
47 |
48 |
64 | {widgetArray?.map((widget, index) => {
65 | return (
66 |
83 |
89 |
{widget.i}
90 |
94 |