@codella-software/react

React hooks for Codella core services - FormBuilder, TableBuilder, FiltersAndSort, TabsService, APIService, and LiveUpdatesService.

Features

- 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

Installation

``bash
npm install @codella-software/utils @codella-software/react
`

Quick Start

$3

`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 (



{/ Form fields /}

);
}


`

$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 (



);
}
``

See API Service Documentation for interceptors, middleware hooks, and authentication patterns.

Documentation

For full API documentation, visit https://CodellaSoftware.github.io/codella-utils/

License

MIT