React-select-costarica-location NPM

react-select-costarica-location

react-select-costarica-location is a collection of 3 select components to be able to select places in Costa Rica.

ezgif com-gif-maker

Installation

use npm to install the package

npm i react-select-costarica-location

Usage

In your form component, import the select components as well as the location state:

import {
  DistrictSelect,
  MunicipalitySelect,
  ProvinceSelect,
  Location,
} from "react-select-costarica-location";

// example with tailwindcss
const ContainerClassName = "flex flex-col w-96";
const LabelClassName = "text-sm font-medium";
const SelectInputClassName =
  "p-2 bg-transparent rounded text-sm border border-zinc-200/70 shadow-sm";

function LocationForm() {
  const { provincia, canton, distrito } = Location();

  //do something with it
  console.log(provincia, canton, distrito);

  return (
    <div>
      <ProvinceSelect
        ContainerClassName={ContainerClassName}
        LabelClassName={LabelClassName}
        SelectInputClassName={SelectInputClassName}
      />
      <MunicipalitySelect
        ContainerClassName={ContainerClassName}
        LabelClassName={LabelClassName}
        SelectInputClassName={SelectInputClassName}
      />
      <DistrictSelect
        ContainerClassName={ContainerClassName}
        LabelClassName={LabelClassName}
        SelectInputClassName={SelectInputClassName}
      />
    </div>
  );
}

:warning: Do not forget to wrap your form with the Context provider

import { ContextProvider as LocationContextProvider } from "react-select-costarica-location";

function App() {
  return (
    <LocationContextProvider>
      <LocationForm />
    </LocationContextProvider>
  );
}
export default App;

Setting default values

to reset the form to a certain state, use the useSetLocationValues function

//get your data
const DEFAULT_PROVINCE = "Cartago";
const DEFAULT_MUNICIPALITY = "Turrialba";
const DEFAULT_DISTRICT = "Tuis";

function Example() {
  const methods = LocationMethods();
  if (!methods) return <p>no context</p>;

  const { useSetLocationValues } = methods;

  //reset form
  useEffect(() => {
    useSetLocationValues({
      province: DEFAULT_PROVINCE,
      municipality: DEFAULT_MUNICIPALITY,
      district: DEFAULT_DISTRICT,
    });
  }, []);

  return (
    <>
      <ProvinceSelect />
      <MunicipalitySelect />
      <DistrictSelect />
    </>
  );
}

Checking whether a place is in the GAM

to check if a place (province, municipality) is in the GAM use the LocationIsInGam function

import {
  LocationIsInGam,
} from "react-select-costarica-location";

function LocationForm() {

  const { provincia, canton, distrito } = Location();
  const [isGam, setIsGam] = useState(false);

  useEffect(() => {
    setIsGam(
      LocationIsInGam({ province: provincia ?? "", municipality: canton ?? "" })
    );
  }, [provincia, canton]);

  return (
    <>
      <ProvinceSelect/>
      <MunicipalitySelect/>
      <DistrictSelect/>
      {isGam ? "Is Gam" : "Is not Gam"}
    </>
  );
}