diff --git a/react-sortable-hoc/react-sortable-hoc.tsx b/react-sortable-hoc/react-sortable-hoc.tsx
new file mode 100644
index 0000000000..f6b86ec4f4
--- /dev/null
+++ b/react-sortable-hoc/react-sortable-hoc.tsx
@@ -0,0 +1,57 @@
+///
+///
+
+const React = require('react');
+const ReactDOM = require('react-dom');
+const { SortableElement, SortableContainer, SortEndHandler, SortEnd, SortEvent, arrayMove } = require('react-sortable-hoc');
+
+interface SortableItemProps {
+ value: string;
+}
+
+interface SortableListProps {
+ items: Array;
+}
+
+type SortableComponentState = SortableListProps;
+
+class Item extends React.Component {
+ public constructor(props: SortableItemProps) {
+ super(props);
+ }
+
+ public render(): JSX.Element {
+ return {this.props.value};
+ }
+}
+
+const SortableItem = SortableElement(Item);
+
+const SortableList = SortableContainer((props: SortableListProps): JSX.Element => {
+ const items: Array = props.items.map((value: string, index: number): JSX.Element => {
+ return ;
+ });
+ return ;
+});
+
+class SortableComponent extends React.Component {
+ private _onSortEnd: SortEndHandler;
+
+ private _handleSotEnd(sort: SortEnd, event: SortEvent): void {
+ this.setState({items: arrayMove(this.state.items, sort.oldIndex, sort.newIndex)});
+ }
+
+ public constructor() {
+ super();
+ this.state = { items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'] };
+ this._onSortEnd = this._handleSotEnd.bind(this);
+ }
+
+ public render(): JSX.Element {
+ return ;
+ }
+}
+
+let bootstrapNode: HTMLDivElement = document.createElement('div');
+ReactDOM.render(, bootstrapNode);
+document.body.appendChild(bootstrapNode);