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

0 0 1 minute read

In this article, let’s see how we can reorder a list of items using the framer-motion library in the ReactJs application.

Approach: We can reorder a list of items using the framer motion library. Framer Motion is an open-source, production-ready library that’s designed for all creative developers. It can be easily used and encapsulated in the code. Below is the step-by-step implementation.

Prerequisites:

ReactJS
Basic knowledge of Framer-motion library
CSS

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

Open the src folder and delete the following files:

logo.svg
setupTests.js
App.test.js
index.css
reportWebVitals.js

Project Structure: The project should look like this:

Example: This example will illustrate the Reorder List of Items Using Framer Motion in ReactJs.

index.js

import React from 'react'; 
import ReactDOM from 'react-dom/client'; 
import App from './App'; 
  
  
const root = ReactDOM.createRoot(document.getElementById('root')); 
root.render( 
  <React.StrictMode> 
    <App /> 
  </React.StrictMode> 
); 

FileName: App.js

Javascript

import React,{useState} from "react"; 
import {Reorder} from "framer-motion"; 
import "./App.css"
  
function App() { 
  const [items, setItems] = useState([ 
      'zambiatek', 
    '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; 

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); 
}* Write CSS Here */

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:

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!