digipin-reactjs

React hooks and components for integrating DIGIPIN (Indian Postal Digital PIN) geocoding into React apps. Includes hooks, prebuilt UI, and helpers for seamless integration.

Live demo: thedigipin.net

Features

• Convert between DIGIPIN and latitude/longitude
• React hook: useDigiPin
• Prebuilt UI component: DigiPinInput
• TypeScript support

Installation

npm install digipin-reactjs digipin react react-dom

Usage

1. Prebuilt Input Component

import { DigiPinInput } from 'digipin-reactjs';

function App() {
  return (
    <div style={{ maxWidth: 500, margin: '2rem auto', fontFamily: 'sans-serif' }}>
      <h1>DigiPin React Example</h1>
      <DigiPinInput />
    </div>
  );
}

2. Custom UI with the Hook

import { useDigiPin } from 'digipin-reactjs';

function CustomDigiPinForm() {
  const { input, setInput, result, loading, error, search } = useDigiPin();

  return (
    <form onSubmit={e => { e.preventDefault(); search(input); }}>
      <input value={input} onChange={e => setInput(e.target.value)} placeholder="Enter DIGIPIN or lat,lon" />
      <button type="submit" disabled={loading}>{loading ? 'Searching...' : 'Search'}</button>
      {error && <div style={{ color: 'red' }}>{error}</div>}
      {result && <pre>{JSON.stringify(result, null, 2)}</pre>}
    </form>
  );
}

3. Convert Latitude/Longitude to DIGIPIN (Hook)

import { useLatLonToDigiPin } from 'digipin-reactjs';

function LatLonForm() {
  const { lat, setLat, lon, setLon, digipinResult, loading, error, convert } = useLatLonToDigiPin();
  return (
    <form onSubmit={e => { e.preventDefault(); convert(); }}>
      <input value={lat} onChange={e => setLat(e.target.value)} placeholder="Latitude" />
      <input value={lon} onChange={e => setLon(e.target.value)} placeholder="Longitude" />
      <button type="submit" disabled={loading}>Convert</button>
      {error && <div>{error}</div>}
      {digipinResult && <div>DIGIPIN: {digipinResult}</div>}
    </form>
  );
}

4. Convert DIGIPIN to Latitude/Longitude (Hook)

import { useDigiPinToLatLon } from 'digipin-reactjs';

function DigiPinForm() {
  const { digipinInput, setDigiPinInput, latLonResult, loading, error, convert } = useDigiPinToLatLon();
  return (
    <form onSubmit={e => { e.preventDefault(); convert(); }}>
      <input value={digipinInput} onChange={e => setDigiPinInput(e.target.value)} placeholder="DIGIPIN" />
      <button type="submit" disabled={loading}>Convert</button>
      {error && <div>{error}</div>}
      {latLonResult && <div>Lat: {latLonResult.lat}, Lon: {latLonResult.lon}</div>}
    </form>
  );
}

5. Prebuilt UI Components

import { LatLonToDigiPinInput, DigiPinToLatLonInput } from 'digipin-reactjs';

function App() {
  return (
    <>
      <LatLonToDigiPinInput />
      <DigiPinToLatLonInput />
    </>
  );
}

Example App

To run the included example/demo app:

cd example
npm install
npm run dev

Open the printed URL (usually http://localhost:5173 or similar) in your browser to view and test the components live.