react-select-costarica-location

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

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"}
    </>
  );
}

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

MIT