feat: react integration

Author: afshinm

docs/integrations/react.md

@@ -0,0 +1,78 @@
+---
+id: react
+title: ⚛️ React 
+---
+
+Grid.js has native React wrapper which can be used to create Grid.js instance in a React app. Use [gridjs-react](https://github.com/grid-js/gridjs-react)
+package to integrate your React app with Grid.js.
+
+## Install
+
+```bash
+npm install --save gridjs-react
+```
+
+Also, make sure you have Grid.js installed already as it's a peer dependency of `gridjs-react`:
+
+```bash
+npm install --save gridjs
+```
+
+## Usage
+
+```js
+import { Grid } from 'gridjs-react';
+```
+
+```jsx
+<Grid
+  data={[
+    ['John', 'john@example.com'],
+    ['Mike', 'mike@gmail.com']
+  ]}
+  columns={['Name', 'Email']}
+  search={true}
+  pagination={{
+    enabled: true,
+    limit: 1,
+  }}
+/>
+```
+
+Then you can pass all Grid.js configs to the `Grid` component. See [Grid.js Config](./config.md) for more details.
+
+## Example
+
+import { Grid } from 'gridjs-react';
+import CodeBlock from "@theme/CodeBlock"
+import { useEffect, useState } from "react";
+import * as faker from 'faker';
+
+<CodeBlock children={
+`
+function MyComponent(props) {
+  const row = () => [faker.name.findName(), faker.internet.email()];
+  const [data, setData] = useState([row()]);
+  const update = () => {
+    setData(data.slice(0).concat([row()]));
+  }
+  
+  return (
+    <div>
+      <button onClick={update.bind(this)} className={"py-2 mb-4 px-4 border rounded-md text-white bg-blue-600"}>
+        Add record
+      </button>
+      
+      <Grid
+        data={data}
+        columns={['Name', 'Email']}
+        pagination={{
+          limit: 5,
+        }}
+      />
+    </div>
+  );
+}
+`
+} live={true} scope={{ Grid, CodeBlock, useEffect, useState, faker }} />
+

package-lock.json

@@ -16,6 +16,7 @@
     "classnames": "^2.2.6",
     "faker": "^4.1.0",
     "gridjs": "file:../gridjs",
+    "gridjs-react": "^1.5.0",
     "react": "^16.8.4",
     "react-dom": "^16.8.4"
   },

package.json

@@ -1,13 +1,13 @@
 module.exports = {
   sidebar: {
-    Introduction: ['index', 'philosophy', 'roadmap', 'community', 'license'],
-    Usage: [
+    "👋 Introduction": ['index', 'philosophy', 'roadmap', 'community', 'license'],
+    "💁 Usage": [
       'install',
       'hello-world',
       'config',
       'server-side',
     ],
-    Config: [
+    "🛠 Config": [
       'config/data',
       'config/from',
       'config/columns',
@@ -19,7 +19,10 @@ module.exports = {
       'config/sort',
       'config/pagination',
     ],
-    Examples: [{
+    "🔌 Integrations": [
+      'integrations/react',
+    ],
+    "🎮 Examples": [{
       type: 'category',
       label: 'Basic',
       items: [