React hooks for Codella core services (FormBuilder, TableBuilder, FiltersAndSort, RichContent)
npm install @codella-software/reactReact hooks for Codella core services - FormBuilder, TableBuilder, FiltersAndSort, TabsService, APIService, and LiveUpdatesService.
- 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 (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
``bash`
npm install @codella-software/utils @codella-software/react
`typescript
import { useFormBuilder } from '@codella-software/react';
function MyForm() {
const { values, errors, submit } = useFormBuilder({
fields: [
{ name: 'email', type: 'text', validators: ['required', 'email'] },
{ name: 'password', type: 'password', validators: ['required'] }
],
onSubmit: (data) => console.log(data)
});
return (
$3
`typescript
import { useTableService } from '@codella-software/react';function MyTable() {
const {
data,
filteredData,
sort,
filter
} = useTableService({
data: users,
columns: userColumns
});
return (
{/ Table content /}
);
}
`$3
`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',
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 (
{loading && Loading...
}
{users.map(user => - {user.name}
)}
);
}
``See API Service Documentation for interceptors, middleware hooks, and authentication patterns.
For full API documentation, visit https://CodellaSoftware.github.io/codella-utils/
MIT