Wrap the browser widget in React

When to use

Use this pattern when a React app can load streetkit.css and streetkit.js once, then attach the widget to an input after React renders it.

Load the hosted assets

<link rel="stylesheet" href="https://streetkit.smp.kiwi/widget/streetkit.css">
<script src="https://streetkit.smp.kiwi/widget/streetkit.js" defer></script>

Example wrapper pattern

import { useEffect, useRef } from "react";

export function StreetKitAddressInput({ onSelect }) {
  const inputRef = useRef(null);

  useEffect(() => {
    if (!inputRef.current || !window.StreetKit) return undefined;

    const widget = window.StreetKit.init({
      input: inputRef.current,
      publicMode: true,
      indexBaseUrl: "https://index.streetkit.smp.kiwi/public/v1",
      onSelect,
      onError(error) {
        console.warn("StreetKit error", error.code);
      }
    });

    return () => widget.destroy();
  }, [onSelect]);

  return (
    <input
      ref={inputRef}
      id="shipping-address"
      name="shipping_address"
      autoComplete="off"
    />
  );
}

Limitations

• No StreetKit React component package is shipped today.
• React should not reimplement StreetKit search, ranking, shard fetching, or dropdown behavior.
• Controlled inputs need careful ownership so React does not fight the widget's selected value.
• Server-rendered React apps should initialize only on the client after window.StreetKit exists.
• The host app still owns validation, submission, analytics choices, and fallback behavior.