New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
nested grids with React #2636
Labels
Comments
I'm not sure if this is the best practice function Grid({ items }: any) {
const gridContainerRef = useRef<HTMLDivElement>(null)
useEffect(() => {
if (gridContainerRef.current) {
GridStack.init(
{
float: false,
acceptWidgets: true,
column: 12,
minRow: 1,
},
gridContainerRef.current
);
}
}, []);
return (
<div className="grid-stack" ref={gridContainerRef}>
{items.map((item, i) => {
return (
<div key={item.id} className="grid-stack-item" gs-id={item.id} gs-w={item.w} gs-h={item.h} gs-x={item.x} gs-y={item.y}>
<div className="grid-stack-item-content">
{item.id}
{item.children && <Grid items={item.children}></Grid>}
</div>
</div>
)
})}
</div>
)
}
function Demo() {
const items =[{
id: 'item-1', x: 0, y: 0, w: 2, h: 2,
}, {
id: 'item-2', x: 2, y: 0, w: 2, h: 2,
children: [{
id: 'item-2-1', x: 0, y: 0, w: 6, h: 6,
}]
}]
return <Grid items={items} />
} |
when items has minW、minH, how to setAttribute to 'grid-stack-item' element?
|
I have the same problem too |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
How to implement nested grids with React, because the content in the example is all strings, and it is not very understanding how React needs to be done.
The text was updated successfully, but these errors were encountered: