ky

packages/hello-world/hello.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import op from "object-path";
 import config from "~/config";
+import ky from "ky";
 // const config = {
 //   title: "Hello World",
 //   description: "Hello World description",
@@ -17,11 +18,31 @@ const data = {
 };
 
 const HelloWorld: React.FC = () => {
+  const [state, setState] = React.useState([]);
+  React.useEffect(() => {
+    ky.get("https://jsonplaceholder.typicode.com/todos/")
+      .json()
+      .then((data) => {
+        setState(data);
+      });
+  }, []);
+
   return (
     <div>
       <strong>Hello World !</strong>
       <p>{data.description}</p>
       <p>Name: {op.get(data, "og.title")}</p>
+
+      <div>
+        <h3>TODO Data</h3>
+        <ul>
+          {state.map((item, index) => (
+            <li key={index}>
+              {item.completed ? "✅" : "🤷"} - {item.title} (#{item.id})
+            </li>
+          ))}
+        </ul>
+      </div>
     </div>
   );
 };

packages/hello-world/package.json

@@ -20,6 +20,7 @@
     "react": "^18.2.0"
   },
   "dependencies": {
+    "ky": "^1.2.2",
     "object-path": "^0.11.8"
   }
 }

pnpm-lock.yaml

@@ -8,6 +8,9 @@ importers:
 
   packages/hello-world:
     dependencies:
+      ky:
+        specifier: ^1.2.2
+        version: 1.2.2
       object-path:
         specifier: ^0.11.8
         version: 0.11.8
@@ -4000,6 +4003,11 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
+  /ky@1.2.2:
+    resolution: {integrity: sha512-gYA2QOI3uIaImJPJjaBbLCdvKHzwxsuB03s7PjrXmoO6tcn6k53rwYoSRgqrmVsEV6wFFegOXDVjABxFZ0aRSg==}
+    engines: {node: '>=18'}
+    dev: false
+
   /language-subtag-registry@0.3.22:
     resolution: {integrity: sha512-tN0MCzyWnoz/4nHS6uxdlFWoUZT7ABptwKPQ52Ea7URk6vll88bWBVhodtnlfEuCcKWNGoc+uGbw1cwa9IKh/w==}
     dev: true