Orizn Visa API

React component

@orizn/react

A drop-in <VisaChecker /> widget, or the SDK underneath it if you want to build your own UI.

What was executed to write this page

@orizn/react 1.1.0 installed from npm and rendered to static HTML with react-dom/server to confirm the exports and prop signature. The data path it uses — the re-exported orizn SDK — was exercised against the live API. The interactive browser flow was NOT driven here; see the note in step 2.

Before you start

  • React 18 or later.
  • An API key for the full record and the 15 languages. Without one the widget still renders in teaser mode — requirement and visa-free days only, capped at 30 checks/day per visitor IP.
Get a free API key

Walkthrough

1. Install

Terminal
npm install @orizn/react

2. Render it

app/page.tsx
"use client";

import { VisaChecker } from "@orizn/react";

export default function Page() {
  return (
    <VisaChecker
      apiKey={process.env.NEXT_PUBLIC_ORIZN_KEY}
      defaultPassport="FRA"
      defaultDestination="JPN"
      theme="dark"
      onResult={(r) => console.log(r.requirement)}
      onError={(e) => console.error(e.message)}
    />
  );
}
Output · Rendered server-side with react-dom/server — first 300 chars
<div style="font-family:system-ui, sans-serif;max-width:480px;color:#e5e7eb">
  <div style="display:flex;gap:8px;margin-bottom:12px">
    <input type="text" aria-label="Passport country code"
           placeholder="Passport (e.g. FRA)" maxLength="3" ...

3. Props

  • apiKey — full details and the 15 languages. Omit it for teaser mode.
  • lang — one of the 15 codes. Needs apiKey.
  • defaultPassport / defaultDestination — ISO 3166-1 alpha-3, prefilled.
  • theme — "light" | "dark" | "auto". auto follows prefers-color-scheme.
  • baseUrl — override the API host.
  • onResult / onError — fire on success and on a typed OriznError.
  • className / style — applied to the wrapper.

Two behaviours worth knowing rather than discovering: only the newest request updates the UI, so a slow answer can never overwrite a newer one; and errors render inline with the link that fixes them — “Get a free API key” on 401/403, “Upgrade your plan” on 429.

4. Building your own UI

The component is a thin layer over the orizn SDK, which it re-exports — so you do not need a second dependency to go custom.

import { Orizn, OriznRateLimitError, normalizeRequirement } from "@orizn/react";

const client = new Orizn({ apiKey });
const visa = await client.getVisa("FRA", "JPN", "ja");
normalizeRequirement(visa.requirement); // "visa_free"
Output · Confirmed exports of the package
LANGUAGES, Orizn, OriznAuthError, OriznBadRequestError, OriznError,
OriznInvalidKeyError, OriznNotFoundError, OriznPlanError, OriznRateLimitError,
VisaChecker, isUpgradeNotice, normalizeRequirement

When it goes wrong

Every failure the integration can hand you, with the message it actually prints.

No apiKey prop

Not an error
The widget runs in teaser mode: requirement and visa-free days only, capped at 30 checks/day per visitor IP. No description, no documents, no languages.

Pass a key when you need the full record. This is a deliberate mode, not a failure.

Key rejected

401 / 403
The error renders inside the widget with a “Get a free API key” link.

onError also fires with the typed OriznError if you want to log it.

Quota spent

429
The widget renders the error with an “Upgrade your plan” link.

The failure stays inside the widget — it does not throw into your tree.

Two requests race

Handled
Only the newest response is rendered.

Nothing to do. Worth knowing before you build your own debounce on top.

This table describes documented and source-visible behaviour of the component. Unlike the other tutorials here, these rows were NOT reproduced by driving the widget in a browser.

End to end: a visa checker on a destination page

The typical placement — a travel site with a page per country, and a checker prefilled with that country.

// app/destinations/[iso3]/checker.tsx  — client component
"use client";

import { VisaChecker } from "@orizn/react";

export function DestinationChecker({ iso3 }: { iso3: string }) {
  return (
    <VisaChecker
      apiKey={process.env.NEXT_PUBLIC_ORIZN_KEY}
      defaultDestination={iso3}
      theme="auto"
    />
  );
}

// app/destinations/[iso3]/page.tsx  — stays a server component
import { DestinationChecker } from "./checker";

export default async function DestinationPage({
  params,
}: {
  params: Promise<{ iso3: string }>;
}) {
  const { iso3 } = await params;
  return (
    <>
      <h1>Travelling to {iso3}</h1>
      <DestinationChecker iso3={iso3} />
    </>
  );
}

The visitor fills in their passport, nothing else. If the checker is the point of the page rather than an add-on, put the call server-side instead — see the Next.js tutorial, where the key never reaches the browser.

Source & reference

Full API reference →GitHub →npm →

Other integrations

MCP server · Claude Desktop · Claude Code · CursorREST API · curl · any languageorizn (npm) · JavaScript / TypeScript SDKorizn (PyPI) · Python SDKorizn (crates.io) · Rust SDK@orizn/langchain · LangChain.js toolsNext.js · Route handler · server-side

50 requests a month, no credit card

All 15 languages included on the free plan. Hit a wall with this tutorial? Mail [email protected] — a tutorial that does not work is a bug.

Get a free API keyAPI reference