Add the GridStackContainer and update docs

Author: Aysnine

react/README.md

@@ -14,8 +14,6 @@ Open in [CodeSandbox](https://codesandbox.io/p/sandbox/github/gridstack/gridstac
 - [x] Custom handle
 - [x] Drag between two grid stacks
 
-Welcome to give any suggestions and ideas, you can submit an issue or contact me by email. :)
-
 ## Usage
 
 This is not an npm package, it's just a demo project. Please copy the `src/lib` code to your project to use it.
@@ -24,6 +22,37 @@ This is not an npm package, it's just a demo project. Please copy the `src/lib`
 
 Render item with widget id selector.
 
+Code here: [src/examples/000-simple/index.tsx](src/examples/000-simple/index.tsx)
+
+```tsx
+function Simple() {
+  const [uncontrolledInitialOptions] = useState<GridStackOptions>(() => ({
+    ...defaultGridOptions,
+    children: [
+      { id: "item1", h: 2, w: 2, x: 0, y: 0 },
+      { id: "item2", h: 2, w: 2, x: 2, y: 0 },
+    ],
+  }));
+
+  return (
+    <GridStackContainer
+      initialOptions={uncontrolledInitialOptions}
+      renderRawContent
+    >
+      <GridStackItem id="item1">
+        <div style={{ color: "yellow" }}>hello</div>
+      </GridStackItem>
+
+      <GridStackItem id="item2">
+        <div style={{ color: "blue" }}>grid</div>
+      </GridStackItem>
+    </GridStackContainer>
+  );
+}
+```
+
+Or split the grid stack container to provide grid stack context and render component for access to grid stack context.
+
 Code here: [src/examples/001-simple/index.tsx](src/examples/001-simple/index.tsx)
 
 ```tsx
@@ -38,6 +67,7 @@ function Simple() {
 
   return (
     <GridStackProvider initialOptions={uncontrolledInitialOptions}>
+      {/* Custom toolbar component. Access to grid stack context by useGridStackContext hook. */}
       <Toolbar />
 
       <GridStackRender renderRawContent>
@@ -210,6 +240,17 @@ function CustomHandle() {
 
 ### Components
 
+#### GridStackContainer
+
+Top-level component that provides GridStack context and GridStack root container. Equivalent to `GridStackProvider` and `GridStackRender` combined.
+
+```typescript
+type GridStackContainerProps = {
+  initialOptions: GridStackOptions; // GridStack initialization options
+  children: React.ReactNode;
+};
+```
+
 #### GridStackProvider
 
 Top-level component that provides GridStack context.

react/src/App.tsx

@@ -1,4 +1,5 @@
 import "./demo.css";
+import { Simple0 } from "./examples/000-simple";
 import { Simple } from "./examples/001-simple";
 import { Nested } from "./examples/002-nested";
 import { CustomHandle } from "./examples/003-custom-handle";
@@ -7,8 +8,11 @@ import { Advanced } from "./examples/009-advanced";
 export default function App() {
   return (
     <div>
-      <h2 id="simple">Simple</h2>
+      <h2 id="simple0">Simple</h2>
       <p>Render content by GridStackItem with id selector.</p>
+      <Simple0 />
+      <h2 id="simple">Simple With Toolbar</h2>
+      <p>With toolbar</p>
       <Simple />
       <h2 id="nested">Nested</h2>
       <p>Only use gridstack.js native subGridOpts.</p>

react/src/examples/000-simple/index.tsx

@@ -0,0 +1,30 @@
+import { GridStackOptions } from "gridstack";
+import { useState } from "react";
+import { defaultGridOptions } from "../../default-grid-options";
+import { GridStackItem } from "../../lib";
+import { GridStackContainer } from "../../lib/grid-stack-container";
+
+export function Simple0() {
+  const [uncontrolledInitialOptions] = useState<GridStackOptions>(() => ({
+    ...defaultGridOptions,
+    children: [
+      { id: "item1", h: 2, w: 2, x: 0, y: 0 },
+      { id: "item2", h: 2, w: 2, x: 2, y: 0 },
+    ],
+  }));
+
+  return (
+    <GridStackContainer
+      initialOptions={uncontrolledInitialOptions}
+      renderRawContent
+    >
+      <GridStackItem id="item1">
+        <div style={{ color: "yellow" }}>hello</div>
+      </GridStackItem>
+
+      <GridStackItem id="item2">
+        <div style={{ color: "blue" }}>grid</div>
+      </GridStackItem>
+    </GridStackContainer>
+  );
+}

react/src/lib/grid-stack-container.tsx

@@ -0,0 +1,23 @@
+import { GridStackOptions } from "gridstack";
+import { PropsWithChildren } from "react";
+import { GridStackProvider } from "./grid-stack-provider";
+import { GridStackRender } from "./grid-stack-render";
+
+export type GridStackContainerProps = PropsWithChildren<{
+  initialOptions: GridStackOptions;
+  renderRawContent?: boolean;
+}>;
+
+export function GridStackContainer({
+  children,
+  initialOptions,
+  renderRawContent,
+}: GridStackContainerProps) {
+  return (
+    <GridStackProvider initialOptions={initialOptions}>
+      <GridStackRender renderRawContent={renderRawContent}>
+        {children}
+      </GridStackRender>
+    </GridStackProvider>
+  );
+}

react/src/lib/index.ts

@@ -1,3 +1,6 @@
+export type { GridStackContainerProps } from "./grid-stack-container";
+export { GridStackContainer } from "./grid-stack-container";
+
 export type { GridStackContextType } from "./grid-stack-context";
 export { GridStackContext, useGridStackContext } from "./grid-stack-context";