SDK Quickstart

React Hooks Quickstart

Install @khaleejiapi/react-hooks, configure authentication or a secure proxy, and make your first authenticated API call.

View SDK repositoryBack to all SDKs

1) Install

bash
npm install @khaleejiapi/react-hooks

2) Environment or proxy setup

text
# Configure this only on your server; never prefix it with NEXT_PUBLIC_
KHALEEJI_API_KEY=your_api_key_here

Before using the client example, create an authenticated, rate-limited same-origin server route at /api/khaleejiapi/validate. Setting the environment variable does not create this route. Follow the Secure proxy setup instructions and keep your API key on the server.

3) Minimal working example

tsx
'use client';
 
import { useGCCPhone } from '@khaleejiapi/react-hooks';
 
export function PhoneForm() {
  const phone = useGCCPhone();
 
  return (
    <form onSubmit={(event) => { event.preventDefault(); void phone.validate(); }}>
      <input
        value={phone.value}
        onChange={(event) => phone.setValue(event.currentTarget.value)}
      />
      {phone.status === 'loading' && <p>Validating…</p>}
      {phone.status === 'error' && <p role="alert">{phone.error?.message}</p>}
      {phone.status === 'valid' && <p>Phone number is valid.</p>}
      <button type="submit" disabled={!phone.formatValid || phone.status === 'loading'}>
        Validate
      </button>
    </form>
  );
}

Next steps

Test your key with a real endpoint from the API reference.

Use retries/rate-limit handling for production workloads.

Review authentication and rate limits before going live.

Authentication guideRate limits