react-draggable-sortable-list

React Draggable List

React Component that allows you to easily use draggable lists in your application

Elements of your list don't need to be equal by height or width.

Install

npm i --save react-draggable-list

or

yarn add react-draggable-list

Basic Usage

import DraggableList from 'react-draggable-list'

const Component = () => {
	return (
		<DraggableList
			direction="horizontal"
			gap={2}
			transition="0.3s"
			lockY
			onDragFinish={(order: string[]) =>
			  // when drag is finished
			}
			order={['A', 'B', 'C', 'D']}
		>
			// your list
		</DraggableList>
	)
}

Note You need to store information of your list in objects for this library to work properly. This object should look like:

const data = {
  [your - key - name - 1]: {
    // your data
  },
  [your - key - name - 2]: {
    // your data
  },
  // ...
};

And the order itself should look just like an array of keys that you have in the object above:

const order = ["[your-key-name-1]", "[your-key-name-2]", // ...]

Also, you need to add id property to your element, because otherwise it won't work. The list inside this component should look like:

order.map((id) => {
  // To use data inside your object you need to call data[id]
  return (
    // Your element
    <Element data={data[id]} id={id} />
  );
});

That was made for a better working experience, because on the output is just an array of keys, and not the whole data object. So it's lighter to store somewhere.

Note You may ask, "What do I do if I need different elements in this list?". The answer is that you just need to specify a component callback in your data object

import { Component1, Component2 } from "somewhere";
//...
const data = {
  [your - key - name - 1]: {
    // other fields
    id: [your - key - name - 1],
    component: (props) => Component1(props),
  },
  [your - key - name - 2]: {
    // other fields
    id: [your - key - name - 2],
    component: (props) => Component2(props),
  },
  // ...
};

This components should look like:

const Component1 = ({ id }: Props) => {
  return <div id={id}>      // ...inside     </div>;
};

And then inside the DraggableList you need to call this component field

order.map((id) => {
  // To use data inside your object you need to call data[id]
  return data[id].component({ ...data[id], key: id });
});

API

• order: string[]: An order in which your elements are located.
• onDragFinish: (newOrder: string[]) => void: A callback that works when you finished dragging
• gap?: number = 10: A gap between elements of your list.
• transition?: string = "0.2s": A transition of elements
• lockX?: boolean = false: Locks X axis so that elements won't move on that axis (can be used for direction: "vertical")
• lockY?: boolean = false: Locks Y axis so that elements won't move on that axis (can be used for direction: "horizontal")
• draggable?: boolean = true: When true, it's possible to drag elements
• direction?: "vertical" | "horizontal" = "vertical": Your list orientation
• shake?: boolean = false: Shaking animation when draggable: true. Was made for a clear user understanding that he can drag an element

Example

For this example I'll show the case with different components, because it may cause the most confusion.

data.ts

import { BlockProps } from "index.tsx";

const data: {
  [key: string]: BlockProps,
} = {
  HTML: {
    id: "HTML",
    value: "HTML",
    color: "#81362f",
    icon: "https://cdn-icons-png.flaticon.com/512/732/732212.png",
    component: (props) => Block(props),
  },
  CSS: {
    id: "CSS",
    value: "CSS",
    color: "#1a3684",
    icon: "https://cdn-icons-png.flaticon.com/512/732/732190.png",
    component: (props) => Block(props),
  },
  JS: {
    id: "JS",
    value: "JS",
    color: "#8f841c",
    icon: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Unofficial_JavaScript_logo_2.svg/1024px-Unofficial_JavaScript_logo_2.svg.png",
    component: (props) => Block(props),
  },
  TS: {
    id: "TS",
    value: "TS",
    color: "#154e74",
    icon: "https://cdn.worldvectorlogo.com/logos/typescript.svg",
    component: (props) => Block2(props),
  },
};

export default data;

FirstBlock.tsx

import React from "react";
import styled from "styled-components";
import { BlockProps } from "index.tsx";

const BlockWrapper = styled.div`
  width: 130px;
  background: #f1f1f1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-weight: bold;
  color: #fff;
  gap: 10px;
  padding: 15px;
  border-radius: 5px;

  img {
    width: 30px;
    height: 30px;
    border-radius: 5px;
  }
`;

const FirstBlock = (props: BlockProps) => {
  return (
    <BlockWrapper
      id={props.id}
      key={props.id}
      style={{ background: props.color }}
    >
      <img src={props.icon} alt="" />
      {props.value}   {" "}
    </BlockWrapper>
  );
};

export default FirstBlock;

SecondBlock.tsx

import React from "react";
import styled from "styled-components";
import { BlockProps } from "index.tsx";

const BlockWrapper2 = styled.div`
  width: 130px;
  background: #f1f1f1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-weight: bold;
  color: #fff;
  gap: 10px;
  padding: 45px 15px;
  border-radius: 5px;

  img {
    width: 30px;
    height: 30px;
    border-radius: 5px;
  }
`;

const SecondBlock = (props: BlockProps) => {
  return (
    <BlockWrapper2
      id={props.id}
      key={props.id}
      style={{ background: props.color }}
    >
            <img src={props.icon} alt="" />      {props.value}   {" "}
    </BlockWrapper2>
  );
};

export default SecondBlock;

index.tsx

import React, { useMemo } from "react";
import styled from "styled-components";
import DraggableList from "react-draggable-list";
import data from "./data.ts";

interface BlockProps {
  id: string;
  value: string;
  color: string;
  icon: string;
  component: (props: any) => any;
}

const Wrapper = styled.div`
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
`;

const App = () => {
  const savedOrder = localStorage.getItem("order");
  const order: string[] = useMemo(
    () =>
      savedOrder
        ? JSON.parse(savedOrder)
        : [...Object.keys(data).map((el) => el)], // eslint-disable-next-line react-hooks/exhaustive-deps
    []
  );
  return (
    <Wrapper>
           {" "}
      <DraggableList
        direction="vertical"
        gap={2}
        transition="0.3s"
        lockY
        onDragFinish={(order: string[]) =>
          localStorage.setItem("order", JSON.stringify(order))
        }
        order={order}
      >
               {" "}
        {order.map((id) => {
          return data[id].component({ ...data[id], key: id });
        })}
             {" "}
      </DraggableList>
         {" "}
    </Wrapper>
  );
};