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 fordirection: "vertical"
) -
lockY?: boolean = false
: Locks Y axis so that elements won't move on that axis (can be used fordirection: "horizontal"
) -
draggable?: boolean = true
: When true, it's possible to drag elements -
direction?: "vertical" | "horizontal" = "vertical"
: Your list orientation -
shake?: boolean = false
: Shaking animation whendraggable: 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>
);
};