How to reorder list of items using Framer Motion in ReactJS?

To reorder the list of items using Framer Motion in ReactJS we will use a dummy list and the reorder component that enables reordering of items on user interaction.

Prerequisites:

• NPM & Node.js
• ReactJS
• Introduction of Framer-motion

Approach

We can reorder a list of items using the Framer motion library. We will install Framer motion and use the Reorder component to implement the reorder functionality in the given list of items.

Creating React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-application demo

Step 2: After creating your project folder i.e. demo, move to it using the following command:

cd demo

Step 3: Install framer-motion from npm.

npm i framer-motion

Project Structure:

The project should look like this.

The updated list of dependencies after installing required modules:

{
    "dependencies": {
        "@testing-library/jest-dom": "^5.17.0",
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": "^13.5.0",
        "framer-motion": "^10.16.4",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-scripts": "5.0.1",
        "web-vitals": "^2.1.4"
    }
}

Example: This example implements a reorderable list using the Reorder component of framer motion.

/* Filename - App.css */
li {
  border-radius: 10px;
  margin-bottom: 10px;
  width: 400px;
  border:2px solid green;
  border-radius: 5px;
  display: flex;
  padding:0px 50px 20px 0px;
  font-weight: bold;
  background:rgb(192, 230, 192);
}

// Filename - App.js

import React, { useState } from "react";
import { Reorder } from "framer-motion";
import "./App.css";

function App() {
    const [items, setItems] = useState([
        "GeeksforGeeks",
        "GFG",
        "Computer Science Portal",
    ]);
    return (
        <Reorder.Group
            axis="y"
            values={items}
            onReorder={setItems}
        >
            {items.map((item) => (
                <Reorder.Item key={item} value={item}>
                    <div
                        style={{
                            color: "green",
                            fontSize: 20,
                            width: "300px",
                            height: "30px",
                            borderRadius: "2px",
                            textAlign: "center",
                            marginLeft: "100px",
                            marginTop: "20px",
                        }}
                    >
                        {item}
                    </div>
                </Reorder.Item>
            ))}
        </Reorder.Group>
    );
}

export default App;

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output: