@codella-software/react 2.0.1 → 2.2.0

package/README.md

@@ -7,8 +7,8 @@ React hooks for Codella core services - FormBuilder, TableBuilder, FiltersAndSor
 - **useFormBuilder** - Manage form state, validation, and submission
 - **useTableService** - Manage dynamic table data, filtering, and sorting
 - **useFiltersAndSort** - Handle complex filtering and sorting logic
-- **useTabsService** - Manage tab state and navigation
-- **useAPIService** - RESTful API client with authentication
+- **useTabsService** - Manage tab state and navigation (use CLI templates for responsive components)
+- **useAPIService** - RESTful API client with authentication, interceptors, and middleware hooks
 - **useLiveUpdates** - Real-time data updates via WebSocket or Server-Sent Events
 
 ## Installation
@@ -69,20 +69,52 @@ function MyTable() {
 
 ```typescript
 import { useAPIService } from '@codella-software/react';
+import { useEffect, useState } from 'react';
 
 function UsersList() {
+  const [users, setUsers] = useState([]);
+  const [loading, setLoading] = useState(false);
+
   const api = useAPIService({
-    baseURL: 'https://api.example.com'
+    baseURL: 'https://api.example.com',
+    hooks: {
+      onBeforeRequest: () => setLoading(true),
+      onAfterResponse: () => setLoading(false),
+      onError: (ctx) => console.error('Error:', ctx.error)
+    }
   });
 
+  // Add request interceptor to include custom headers
+  useEffect(() => {
+    api.interceptors.request.use((config) => ({
+      ...config,
+      headers: { ...config.headers, 'X-App-Version': '2.0' }
+    }));
+
+    // Add response interceptor to transform data
+    api.interceptors.response.use((response) => ({
+      ...response,
+      data: Array.isArray(response.data) ? response.data : [response.data]
+    }));
+  }, [api]);
+
   useEffect(() => {
     api.get('/users').then(setUsers);
   }, [api]);
 
-  return <div>{/* Display users */}</div>;
+  return (
+    <div>
+      {loading && <p>Loading...</p>}
+      <ul>
+        {users.map(user => <li key={user.id}>{user.name}</li>)}
+      </ul>
+    </div>
+  );
 }
 ```
 
+See [API Service Documentation](https://CodellaSoftware.github.io/codella-utils/api-service/) for interceptors, middleware hooks, and authentication patterns.
+
 ## Documentation
 
 For full API documentation, visit [https://CodellaSoftware.github.io/codella-utils/](https://CodellaSoftware.github.io/codella-utils/)