Merge pull request #6 from stackai/feature/adding_additional_props

Feature/adding additional props

README.md

@@ -47,6 +47,17 @@ You should be able to see the chatbot embedded in your app
 
 <img width="858" alt="image" src="https://github.com/stackai/react-stackai/assets/32944505/6df0c532-c85c-4d82-b004-9b4612f52139">
 
+## Props
+
+These are all the props you can pass to the `<Stack />` component.
+
+| Name | Type   | Description
+| ---- | ------ | -----------
+| `project` | `string` | The URL of the project you want to embed
+| `width` | `string` | Specifies the width of the iframe. The value must be a string with a numeric value followed by a unit (e.g., '35rem', '100px'). The default is '35rem'. If the width is less than the minimum width of 15 rem, a warning is logged, and the width is adjusted to the minimum. If the width is specified without a recognizable unit or is an invalid string, an error is thrown.
+| `fixed` | `boolean` | Set to true if you want the chatbot to be fixed to the bottom of the screen, or false if you want it to be relative to the page.
+
+`height` of the iframe is automatically set to 38.5 rem. 
 
 ## Contributing
 

example/App.tsx

@@ -5,7 +5,11 @@ function App() {
   return (
     <>
       <h1>Demo website</h1>
-      <Stack project="https://www.stack-ai.com/embed/46bf5b6a-9b4d-48f6-8a13-cdfc4fe58520/11da0c81-afe2-4ccd-b498-807bbde8e7f1/653fefcfcc37c0093d55e6a9" />
+      <Stack
+        project="https://www.stack-ai.com/embed/46bf5b6a-9b4d-48f6-8a13-cdfc4fe58520/11da0c81-afe2-4ccd-b498-807bbde8e7f1/653fefcfcc37c0093d55e6a9"
+        width={'35rem'} // optional (default: '35rem')
+        fixed={true} // optional (default: true)
+      />
     </>
   );
 }

package.json

@@ -28,9 +28,7 @@
   "dependencies": {
     "lodash.debounce": "^4.0.8",
     "react": ">=17.0.0",
-    "react-dom": ">=17.0.0",
-    "react-iframe": "^1.8.5",
-    "react-merge-refs": "^2.1.1"
+    "react-dom": ">=17.0.0"
   },
   "peerDependencies": {
     "react": ">=17.0.0",