Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to make a resizable element in React JS
In this article, we will see how to make a resizable element in React JS. We always create resizable textarea in HTML, but when it comes to creating other elements resizable, it seems impossible. In React, we can create resizable elements easily using a simple library.
Example
First install the following package −
npm install --save re-resizable
re-resizable is used to import a resizable container which will be used to add Resizable functionality to any DOM element.
Add the following lines of code in App.js −
import React, { useState } from "react";
import { Resizable } from "re-resizable";
export default function App() {
const [state, setState] = useState({ width: 320, height: 200 });
return (
<Resizable
style={{ marginLeft: 500, marginTop: 200, border: "1px solid black" }}
size={{ width: state.width, height: state.height }}
onResizeStop={(e, direction, ref, d) => {
setState({
width: state.width + d.width, height: state.height + d.height,});
}}>
Sample with size
</Resizable>
);
}Explanation
Adding any element inside <Resizable> makes it resizable.
The size attribute defines the size of the resizable component.
onResizeStop defines what to do when the user tries to resize the element. Here we change width and height of the element in State which makes the required changes in the size attribute.
Arguments like d.width and d.height define how much the width or height should increase or decrease.
Output
On execution, it will produce the following output −
4K+ Views
