@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

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

Quick Start

useFormBuilder

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 onSubmit={submit}>
      {/* Form fields */}
    </form>
  );
}

useTableService

import { useTableService } from '@codella-software/react';

function MyTable() {
  const { 
    data, 
    filteredData, 
    sort, 
    filter 
  } = useTableService({
    data: users,
    columns: userColumns
  });

  return (
    <table>
      {/* Table content */}
    </table>
  );
}

useAPIService

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 (
    <div>
      {loading && <p>Loading...</p>}
      <ul>
        {users.map(user => <li key={user.id}>{user.name}</li>)}
      </ul>
    </div>
  );
}

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