Add example from react-beautiful-dnd and typescript

package.json

@@ -3,9 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@types/react": "^16.8.12",
+    "@types/react-beautiful-dnd": "^10.1.1",
     "react": "^16.8.6",
+    "react-beautiful-dnd": "^11.0.0-beta",
     "react-dom": "^16.8.6",
-    "react-scripts": "2.1.8"
+    "react-scripts": "2.1.8",
+    "typescript": "^3.4.2"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.css

@@ -1,3 +1,18 @@
+.list-ct {
+  background-color: #e2e2e2;
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 10px;
+}
+.list-item {
+  padding: 6px 10px;
+  margin: 10px 10px 0 10px;
+  cursor: pointer;
+  color: white;
+  background: #e03d49;
+}
+
+
 .App {
   text-align: center;
 }

src/App.tsx

@@ -0,0 +1,111 @@
+import React from "react";
+import {
+  DragDropContext,
+  Droppable,
+  Draggable,
+  DropResult,
+  DraggableProvided,
+  DraggableStateSnapshot,
+  DroppableProvided,
+  DroppableStateSnapshot
+} from "react-beautiful-dnd";
+import "./App.css";
+
+const listCtStyle = {
+  width: "200px",
+  margin: "12px"
+};
+
+const reorder = (list: Item[], startIndex: number, endIndex: number) => {
+  const result = Array.from(list);
+  const [removed] = result.splice(startIndex, 1);
+  result.splice(endIndex, 0, removed);
+
+  return result;
+};
+
+interface Item {
+  id: number;
+}
+
+interface State {
+  items: Item[];
+}
+
+class App extends React.Component {
+  state: State = {
+    items: [
+      {
+        id: 1
+      },
+      {
+        id: 2
+      },
+      {
+        id: 3
+      }
+    ]
+  };
+
+  handleDragEnd = (result: DropResult) => {
+    console.log(result);
+    if (!result.destination) {
+      return;
+    }
+
+    const items = reorder(
+      this.state.items,
+      result.source.index,
+      result.destination.index
+    );
+
+    this.setState({
+      items
+    });
+  };
+
+  render() {
+    return (
+      <DragDropContext onDragEnd={this.handleDragEnd}>
+        <Droppable droppableId="droppable">
+          {(provided: DroppableProvided, snapshot: DroppableStateSnapshot) => (
+            <div
+              ref={provided.innerRef}
+              style={listCtStyle}
+              className="list-ct"
+            >
+              {this.state.items.map((item, index) => (
+                <Draggable
+                  key={item.id}
+                  draggableId={`${item.id}`}
+                  index={index}
+                >
+                  {(
+                    provided: DraggableProvided,
+                    snapshot: DraggableStateSnapshot
+                  ) => (
+                    <div>
+                      <div
+                        ref={provided.innerRef}
+                        {...provided.draggableProps}
+                        {...provided.dragHandleProps}
+                        className="list-item"
+                        style={{ ...provided.draggableProps.style }}
+                      >
+                        ITEM {item.id}
+                      </div>
+                      {provided.placeholder}
+                    </div>
+                  )}
+                </Draggable>
+              ))}
+              {provided.placeholder}
+            </div>
+          )}
+        </Droppable>
+      </DragDropContext>
+    );
+  }
+}
+
+export default App;

src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve"
+  },
+  "include": [
+    "src"
+  ]
+}