@mirohq/websdk-react-hooks - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

package.json

 {
   "name": "@mirohq/websdk-react-hooks",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Collection of React Hooks wrappers for Miro WebSDK",
@@ -63,2 +63,4 @@ "main": "esm/index.js",
     "@types/jest": "^29.5.10",
+    "@types/lodash": "^4.14.202",
+    "@types/react": "^18.2.41",
     "@typescript-eslint/eslint-plugin": "^6.4.0",
@@ -90,3 +92,3 @@ "@vitejs/plugin-react": "^4.2.1",
     "ts-node": "^10.9.1",
-    "typescript": "*",
+    "typescript": "^5.3.3",
     "vite": "^5.0.7"
@@ -106,6 +108,4 @@ },
   "dependencies": {
-    "@react-hookz/web": "^23.1.0",
-    "@types/lodash": "^4.14.202",
-    "@types/react": "^18.2.41"
+    "@react-hookz/web": "^23.1.0"
   }
-}
+}

README.md

@@ -1,5 +0,7 @@
-# miro-websdk-react-hooks [![NPM version](https://img.shields.io/npm/v/@mirohq/websdk-types.svg)](https://www.npmjs.com/package/@mirohq/websdk-types)
+# miro-websdk-react-hooks [![NPM version](https://img.shields.io/npm/v/@mirohq/websdk-react-hooks.svg)](https://www.npmjs.com/package/@mirohq/websdk-react-hooks)
 
 Collection of [React hooks](https://legacy.reactjs.org/docs/hooks-intro.html) to interact with [Miro Platform WebSDK](https://developers.miro.com/docs/miro-web-sdk-introduction).
 
+Add a bit of :sparkles:reactivity:sparkles: to your Miro app.
+
 ## Use it!
@@ -20,7 +22,54 @@
 
-const App: React.FC = ({ children }) => <MiroProvider miro={window.miro}>{children}</MiroProvider>;
+const App: React.FC = ({ children }) => <MiroProvider>{children}</MiroProvider>;
+
+/*
+ You can also optional inject the global Miro WebSDK instance
+ 
+ const App: React.FC = ({ children }) => <MiroProvider miro={window.miro}>{children}</MiroProvider>;
+*/
 ```
 
-Make sure you have a [Miro application](https://developers.miro.com/docs/build-your-first-hello-world-app) configured to use it:
+Make sure you have a [Miro application](https://developers.miro.com/docs/build-your-first-hello-world-app) configured to use it. The hooks in this library will only work within Miro boards and in a well-configured app.
 
+### Isomorphic or not?
+
+The [Miro WebSDK](https://developers.miro.com/docs/miro-web-sdk-introduction) is **NOT** isomorphic, meaning that you cannot use it in both server and client environments. This also applies to this library, it won't work you are rendereing your React components in the server.
+
+### What if I am using Nextjs?
+
+Well, in that case, you can wrap your component in a dynamic code block that will defer the component rendering to only execute in the client-side:
+
+```tsx
+import dynamic from "next/dynamic";
+import React from "react";
+import { useCurrentUser } from "@mirohq/websdk-react-hooks";
+
+const NoSsr: React.FC<React.PropsWithChildren> = (props) => (
+  <React.Fragment>{props.children}</React.Fragment>
+);
+
+const NoSSRWrapper = dynamic(() => Promise.resolve(NoSsr), {
+  ssr: false,
+});
+
+// And in your Nextjs page
+
+const Component: React.FC = () => {
+    const { status, result, error } = useCurrentUser();
+
+    if (status === "success") {
+        return <p>The current user is "{result?.name}"</p>;
+    }
+}
+
+export default function OnlyInTheClient() {
+  return (
+    <NoSSRWrapper>
+      <Group />
+    </NoSSRWrapper>
+  );
+}
+
+```
+
 ## Hooks
@@ -42,4 +91,6 @@
 - [Typescript](https://www.typescriptlang.org/)
+- [React Hookz Web](https://react-hookz.github.io/web/)
 - [Jest](https://jestjs.io/)
 - [React testing library](https://testing-library.com/docs/react-testing-library/intro/)
+- [React Hooks Testing Library](https://github.com/testing-library/react-hooks-testing-library)
 
@@ -46,0 +97,0 @@ ## Contributing

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

86665

increased by5.53%

Dependency count

3

decreased by-40%

Number of package files

117

increased by5.41%

Lines of code

1389

increased by2.97%

Number of lines in readme file

98

increased by108.51%

Worsened metrics

Dev dependency count

38

increased by5.56%

Dependency changes

• - Removed@types/lodash@^4.14.202

• - Removed@types/react@^18.2.41

• - Removed@types/lodash@4.17.14(transitive)

• - Removed@types/prop-types@15.7.14(transitive)

• - Removed@types/react@18.3.18(transitive)

• - Removedcsstype@3.1.3(transitive)