react demo with more use case and readme #2898
Conversation
|
thank you for the update! |
| id: "item1", | ||
| h: 2, | ||
| w: 2, | ||
| content: JSON.stringify({ |
There was a problem hiding this comment.
is there a good reason to have a json structure here instead of just
content: 'Item 1'
I suppose you can make it other thing than name:'text' (should be type) but real apps are likely to use actual components looked up by unique id or something (see angular wrapper 'selector' field) and not content field. see Angular demo with component readme.
There was a problem hiding this comment.
Good idea. I didn't think of doing that at the time. Since initially I wanted to store react component information on the same set of data structures, I'll try to do it your way, and may need to maintain an additional copy of the mapping relationship.
There was a problem hiding this comment.
great, and also try to use the same class names and fields as I have done for Angular wrapper if possible ('selector' is an angular thing since that is the field we use, so pick the native React equivalent).
Maybe @damien-schneider and @GowthamTG can also chime on this so maybe between the 3 of you we can get an official React wrapper as well. I appreciate the help as I don't know React.
Also demo should be more like two.html (maybe still with nested grid) so we make sure dragging between grids also works. The key is to let Gridstack handle the grid/container creation/reparenting/layout and have React get called back when content (or in the Angular case the grid and gridItem as parents also have to be Angular based) needs to be created using native platform way.
https://github.com/gridstack/gridstack.js/tree/master/angular#more-complete-example
Description
A React wrapper component for GridStack that provides better TypeScript support and React integration experience.
Checklist
yarn test)