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:
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([ 'neveropen', '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:
