@buyandrent/react-fr

React input components for French SaaS applications - address autocomplete, SIRET lookup, IBAN validation, phone formatting. No API key required.

Used in production at buyandrent.fr | Live demo (Storybook)

Install

npm i @buyandrent/react-fr

Components

AddressInput

Autocomplete input for French addresses using the Base Adresse Nationale API.

import { AddressInput } from "@buyandrent/react-fr";

function MyForm() {
  return (
    <AddressInput
      placeholder="Saisissez une adresse"
      onSelect={(address) => {
        console.log(address.label);      // "12 Rue de la Paix 75002 Paris"
        console.log(address.postcode);   // "75002"
        console.log(address.lat);        // 48.8698
      }}
    />
  );
}

Prop	Type	Default	Description
onSelect	(address: FrenchAddress) => void	-	Called when an address is selected
debounceMs	number	300	Debounce delay in ms
className	string	-	CSS class name
style	CSSProperties	-	Inline styles
...rest	InputHTMLAttributes	-	All standard input props

PostalCodeInput

Input for French postal codes. Auto-suggests matching cities on 5-digit input.

import { PostalCodeInput } from "@buyandrent/react-fr";

function MyForm() {
  return (
    <PostalCodeInput
      placeholder="Code postal"
      onSelect={({ postcode, city, citycode }) => {
        console.log(`${postcode} ${city}`); // "75002 Paris"
      }}
    />
  );
}

Prop	Type	Default	Description
onSelect	(value: FrenchPostalCity) => void	-	Called when a city is selected
className	string	-	CSS class name
style	CSSProperties	-	Inline styles

SiretInput

Input for French SIRET numbers with client-side Luhn validation and company lookup.

import { SiretInput } from "@buyandrent/react-fr";

function MyForm() {
  return (
    <SiretInput
      placeholder="Numéro SIRET"
      onFetch={(company) => {
        console.log(company.name);       // "GOOGLE FRANCE"
        console.log(company.siret);      // "44306184100047"
        console.log(company.isActive);   // true
      }}
      onError={(error) => console.error(error)}
    />
  );
}

Prop	Type	Default	Description
onFetch	(company: FrenchCompany) => void	-	Called with company data on valid SIRET
onError	(error: string) => void	-	Called on validation or fetch error
className	string	-	CSS class name
style	CSSProperties	-	Inline styles

IbanInput

IBAN input with live formatting (groups of 4) and ISO 13616 checksum validation.

import { IbanInput } from "@buyandrent/react-fr";

function MyForm() {
  return (
    <IbanInput
      placeholder="FR76 XXXX XXXX ..."
      onChange={(value, isValid) => {
        console.log(value);    // "FR7630001007941234567890185"
        console.log(isValid);  // true
      }}
    />
  );
}

Prop	Type	Default	Description
onChange	(value: string, isValid: boolean) => void	-	Called on every change with raw value and validity
className	string	-	CSS class name
style	CSSProperties	-	Inline styles

PhoneInput

French phone number input with live formatting and validation.

import { PhoneInput } from "@buyandrent/react-fr";

function MyForm() {
  return (
    <PhoneInput
      placeholder="06 12 34 56 78"
      onChange={(value, isValid) => {
        console.log(value);    // "0612345678"
        console.log(isValid);  // true
      }}
    />
  );
}

Prop	Type	Default	Description
onChange	(value: string, isValid: boolean) => void	-	Called on every change with raw value and validity
className	string	-	CSS class name
style	CSSProperties	-	Inline styles

Hooks

useAddressSearch

Standalone hook for the French address API.

import { useAddressSearch } from "@buyandrent/react-fr";

function MyComponent() {
  const { results, isLoading } = useAddressSearch("12 rue de la paix paris");
  // results: FrenchAddress[]
}

useSiretLookup

Standalone hook for SIRET company lookup.

import { useSiretLookup } from "@buyandrent/react-fr";

function MyComponent() {
  const { company, isLoading, error } = useSiretLookup("44306184100047");
  // company: FrenchCompany | null
}

isValidSiretFormat

Utility function to validate SIRET format with Luhn algorithm.

import { isValidSiretFormat } from "@buyandrent/react-fr";

isValidSiretFormat("44306184100047"); // true
isValidSiretFormat("12345678901234"); // false

No API key required

All API calls use free, public French government APIs:

Component	API	Documentation
AddressInput, PostalCodeInput	api-adresse.data.gouv.fr	Base Adresse Nationale - free, no key, no rate limit for reasonable use
SiretInput	recherche-entreprises.api.gouv.fr	Recherche Entreprises - free, no key
IbanInput, PhoneInput	None	Client-side validation only

Styling

All components are headless (unstyled) by default. Pass className and style props to style them, or wrap them in your design system.

License

MIT