A draggable and resizable grid layout with responsive breakpoints, for React.
Questions tagged [react-grid-layout]
162 questions
23
votes
4 answers
React Pass function to child component
I want to pass a function to a child component but I'm getting this error.
Invalid value for prop passedFunction on
tag.
class Parent extends Component {
passedFunction(){}
render() {
Lunny
- 852
- 1
- 10
- 23
21
votes
3 answers
reactjs draggable and resizeable component
for the past few hours I have been trying to search for a way to make a react component draggable and resizable. I have found a way to make it draggable with react drag and drop, but I can't find a simple way to make it resizeable :/
Does anyone…
user2882307
16
votes
2 answers
Programmatically change height/width of items in react-grid-layout
Is there a way to programmatically change w and h of an item's layout? The use case is to have a "collapse" button which reduces the height to a constant height, enough to leave the header of the item. To do this my original idea was to keep layouts…
ZekeDroid
- 7,089
- 5
- 33
- 59
14
votes
4 answers
How to handle condition rendering in react
I am using react-grid-layout This to enable drag and drop and resizing in my website.
SO drag and drop I am able to achieve and storing my layout to local storage is also done.
I am using Local storage to save my layout for better user experience…
vivek singh
- 417
- 2
- 12
- 36
8
votes
2 answers
How to create dynamic drag and drop layout with react-grid-layout
I am using react-grid-layout to make drag-drop and resize components, So i am able to achieve the functionality as mentioned in the doc.
My Issue
I am creating dynamic UI so I am rendering my UI with data.
Here in this library I need to create…
manish thakur
- 760
- 9
- 35
- 76
5
votes
1 answer
react-grid-layout Error: not mounted on DragStart
When attempting to drag around or resize any panel within my ResponsiveGridLayout i'm getting the following error: not mounted on DragStart!
Here is my GridLayout:
Javier Montoya
- 171
- 2
- 7
5
votes
2 answers
Unable to get Plotly.js graph to resize within react-grid-layout
I have been working on a react-grid-layout to display and move graphs around on screen. Currently I am able to add a plotly.js graph to a container. It is moveable but does not resize with the container. I am wondering if an async function is…
lallen6
- 71
- 6
4
votes
2 answers
React get size of parent element within ResponsiveReactGridLayout
I'm trying to render a dashboard using ResponsiveReactGridLayout and my code in the functional component is as follows:
const Home = () => {
const [coins, setCoins] = useState(latestCoins);
const [coin, setCoin] = useState(curCoin);
const…
Shubhankar Agrawal
- 181
- 9
4
votes
1 answer
Only one highcharts using react-grid-layout can resize
I am building a dashboard using React-Grid-Layout that will consist of grids that will house widgets (i.e. charts, calendars etc.). Each grid will be draggable, responsive and resizable (widget in grid will resize too).
My code;
import React, {…
Gerald Goh
- 55
- 5
4
votes
0 answers
Auto-size data-grid of react-grid-layout
I am using responsive react grid layout in a container where i have expandable/collapsible side bar. As of now when RGL is getting loaded with all its data-grid items, it looks perfect however when i expand/collapse sidebar (which changes the parent…
K..
- 41
- 1
4
votes
3 answers
Is it possible to get initial breakpoint using react-grid-layout?
Using https://github.com/STRML/react-grid-layout
I need to know the current breakpoint on componentDidMount. Based on breakpoint, I know what item sizes I should provide (grid items are "picked up" by user from multiple select).
react-grid-layout…
ziggy
- 45
- 1
- 8
4
votes
1 answer
Using custom component with react-layout-grid
I am using https://github.com/strml/react-grid-layout to create a layout of items which I can resize and move. The problem I'm having has been raised in multiple issues (below) against the repo with little…
CWSites
- 1,428
- 1
- 19
- 34
4
votes
1 answer
react-grid-layout How can I resize components on the grid?
I tried using a custom component with react-grid-layout. However, I could not get it working.
When I put the component inside a div, I can resize that div, but the component itself is not resized with it.
When I put the component inside the grid…
GiaglS
- 63
- 1
- 1
- 5
4
votes
1 answer
How to fill React Grid Layout item with material UI Card
I'm using React Grid layout to display a grid of widgets.
Here is my grid component :
class WidgetsGrid extends Component {
render() {
var layout = [
{ i: "a", x: 0, y: 0, w: 3, h: 3, minW: 2, maxW: 4 }
];
var…
Putxe
- 1,054
- 1
- 16
- 23
4
votes
1 answer
Programatically generating grid items with react-grid-layout
I am developing an application using Meteor and ReactJS. I am using the react-grid-layout component to create a grid of items.
The problem is that the position of each element needs to be specified manually. In my application, I am generating the…
user2840647
- 1,236
- 1
- 13
- 32