open-index/open-npm huggingface dataset:
npm package: @smvtech/x-flux
Description: x-flux - A powerful React package for managing effective document collection flows, visa questionnaires, travellers, and applications
Latest version: 1.1.21

# x-flux

A powerful, production-ready React package for managing effective document collection flows, visa questionnaires, travellers, and applications.

## Installation

```bash
npm install @smvtech/x-flux
```

**Note:** When you install this package, `axios` will be automatically installed as a dependency. You don't need to install it separately.

## Peer Dependencies

These must be installed in your project:
- `react` ^18.0.0
- `react-dom` ^18.0.0  
- `zod` ^3.21.0

## Quick Start

### 1. Initialize with Config

```typescript
import { initializeEDCFlow, EDCFlowProvider, useEDCFlow } from '@smvtech/x-flux';

// Initialize once in your app (usually in App.tsx or index.tsx)
initializeEDCFlow({
  baseUrls: {
    STAG: 'https://api-staging.example.com',
    PROD: 'https://api.example.com',
    LOCAL: 'https://api-dev.example.com'
  },
  environment: 'PROD', // or 'STAG' or 'LOCAL'
  jwtToken: 'your-jwt-token-here'
});
```

### 2. Use the Provider

```typescript
function App() {
  return (
    <EDCFlowProvider orderId="your-order-id">
      <YourComponent />
    </EDCFlowProvider>
  );
}
```

### 3. Use the Hook

```typescript
function YourComponent() {
  const {
    applicants,
    loading,
    error,
    addApplicant,
    updateAnswer,
    updateTraveller,
    deleteApplicant
  } = useEDCFlow();

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div>
      {Object.values(applicants).map(applicant => (
        <div key={applicant.application_id}>
          <h3>{applicant.traveller.first_name}</h3>
        </div>
      ))}
    </div>
  );
}
```

## Configuration

Each project passes its own config:

```typescript
interface EDCConfig {
  baseUrls: {
    STAG: string;
    PROD: string;
    LOCAL: string;
  };
  environment: 'PROD' | 'STAG' | 'LOCAL';
  jwtToken: string;
}
```

## API

### `initializeEDCFlow(config: EDCConfig)`

Initialize the package. Call once before using `EDCFlowProvider`.

### `EDCFlowProvider`

**Props:**
- `orderId: string` - The order ID to manage
- `children: ReactNode`

### `useEDCFlow()`

Returns:
- `orderId`, `order`, `questionnaire`, `applicants`
- `loading`, `error`, `success`
- `addApplicant`, `updateAnswer`, `updateTraveller`, `deleteApplicant`
- `refreshApplicant`, `refreshOrder`

## License

Private - Internal use only