NIGERIA-STATE-LGA-COMPONENT

This library which allows developers to quickly fetch data about Nigerian geographical regions, states and Local Government Areas (LGA). It provides a customisable component which can be used to display the fetched data, allowing developers to save time and energy in coding.

• fetch Geographical region data by using the useRegionsApi Hook.

• fetch all 36 states plus FCT data by using the useStatesApi Hook.

• fetch all 774 Local Government Area data by using the useStateLGAApi Hook. However, you could save yourself that time by using the customizbale components StateWidget and LGAWidget.

• display States data using the StateWidget compoennt.

• display LGA data based on state using the LGAWidget compoennt. While you can use both components as standalone, however, the LGAWidget requires that the state prop be given a string value.

Demo

https://nigeria-state-lga-react-component.todak2000.repl.co/

Quickstart

Install this library:

npm i @todak2000/nigeria-state-lga-react-component
# or
yarn add @todak2000/nigeria-state-lga-react-component

Then, import and use any of the functionalities you might require:

...
import {
  useStatesApi,
  useStateLGAApi,
  StateWidget,
  LGAWidget,
  useRegionsApi,
} from "@todak2000/nigeria-state-lga-component";


function SampleApp() {
  const [state, setState] = useState("");
  const [LGA, setLGA] = useState("");
  const [stateAlone, setStateAlone] = useState("");
  const [stateMultiple, setStateMultiple] = useState([]);
  const [LGAAlone, setLGAAlone] = useState("");
  const [LGAMultiple, setLGAMultiple] = useState([]);

  const singleStateLGAs = useStateLGAApi("cross river");
  const regions = useRegionsApi();

  return (
    <div
      style={{
        display: "flex",
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-around",
        flexWrap: "wrap",
        overflowY: "auto",
        height: "95vh",
      }}
    >
      <div
        style={{
          padding: 10,
          backgroundColor: "#f1f9f9",
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
          marginBottom: 10,
        }}
      >
        <p>State/LGA Widgets Together</p>
        <StateWidget
          setState={setState}
          className="bg-select"
          selectStyle={{ padding: 5}}
        />
        <p>State Selected: {state}</p>

        {state !== "" && (
          <>
            <LGAWidget
              state={state}
              setLGAState={setLGA}
              className="bg-select"
              selectStyle={{ padding: 5}}
            />
            <p>LGA Selected: {LGA}</p>
          </>
        )}
      </div>
      <div
        style={{
          padding: 10,
          backgroundColor: "#1e90ff",
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
          marginBottom: 10,
        }}
      >
        <p>State Widget Standalone (Single Select)</p>
        <StateWidget
          setState={setStateAlone}
          className="bg-select"
          selectStyle={{ padding: 5}}
        />
        <p>State Selected: {stateAlone}</p>
      </div>

      <div
        style={{
          padding: 10,
          backgroundColor: "#0d98ba",
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
          marginBottom: 10,
        }}
      >
        <p>State Widget Standalone (Multiple Select)</p>
        <StateWidget
          isMultipleSelect
          setState={setStateMultiple}
          className="bg-select"
          selectStyle={{ padding: 5}}
        />
        <p>
          States Selected: <br />
          {stateMultiple.map((state) => {
            return (
              <span>
                {state}
                <br />
              </span>
            );
          })}
        </p>
      </div>
      <div
        style={{
          padding: 10,
          backgroundColor: "#89CFF0",
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
          marginBottom: 10,
        }}
      >
        <p>LGA Widget Standalone (Single Select)</p>
        <LGAWidget
          setLGAState={setLGAAlone}
          className="bg-select"
          selectStyle={{ padding: 5}}
        />
        <p>LGA Selected: {LGAAlone}</p>
      </div>

      <div
        style={{
          padding: 10,
          backgroundColor: "#a2a2d0",
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
          marginBottom: 10,
        }}
      >
        <p>LGA Widget Standalone (Multiple Select)</p>
        <LGAWidget
          setLGAState={setLGAMultiple}
          isMultipleSelect
          className="bg-select"
          selectStyle={{ padding: 5}}
        />
        <p>
          LGAs Selected: <br />
          {LGAMultiple.map((lga) => {
            return (
              <span>
                {lga}
                <br />
              </span>
            );
          })}
        </p>
      </div>
      <div
        style={{
          padding: 10,
          backgroundColor: "#a2a2d0",
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
          marginBottom: 10,
        }}
      >
        <h4>Regions</h4>
        <ul style={{ overflowY: "auto", height: "40vh" }}>
          {regions.map(({ id, region }) => (
            <li key={id}>{region}</li>
          ))}
        </ul>
      </div>
      <div
        style={{
          padding: 10,
          backgroundColor: "#f1f9f9",
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
          marginBottom: 10,
        }}
      >
        <h4>Single State Result</h4>
        <ul style={{ overflowY: "auto", height: "40vh" }}>
          {singleStateLGAs.map(({ id, state, lga }) => (
            <div key={id}>
              <h4>{state}</h4>
              <ul style={{ overflowY: "auto", height: "80vh" }}>
                {lga.map((lgaName) => (
                  <li key={lgaName}>{lgaName}</li>
                ))}
              </ul>
            </div>
          ))}
        </ul>
      </div>
    </div>
  );
}

export default SampleApp;

API

This is a list of props required/optional. It is important to note that depending if isMultipleSelect is true or false, developer might want to customize the Select/Option component.

Property	Description	DefaultValue	Type	Component Type	Compulsory
setState	Function that allows you to update the selected state value	null	function	StateWidget	Yes
setLGAState	Function that allows you to update selected the LGA value	null	function	LGAWidget	Yes
className	Name of parent classes	""	string	All	optional
style	Name of parent style attribute	{padding: 5}	object	All	optional
isMultipleSelect	Help to determine type of select component preffered : Singleselect or Multiselect	false	boolean	All	optional
selectClassName	Select tag parent class attribute - pass your customized classes in here	defaultClass	string	All	optional
selectStyle	Select tag parent style attribute - pass your customized style object in here	defaultStyle	object	All	optional
dropdownClassName	Drop down parent class attribute - pass your customized classes in here	defaultClass	string	All	optional
dropdownStyle	Drop down Container style attribute	defaultStyle	object	All	optional
selectedItemStyle	Selected Item Container style attribute	defaultStyle	object	All but IsMultipleSelect must be true	optional
selectedItemClass	Selected item parent class attribute - pass your customized classes in here	defaultClass	string	All but IsMultipleSelect must be true	optional
optionsContainerClass	Options Container parent class attribute - pass your customized classes in here	defaultClass	string	All	optional
optionsContainerStyle	Options Container style attribute	defaultStyle	object	All	optional
optionsClass	Option item class attribute - pass your customized classes in here	defaultClass	string	All	optional
optionsStyle	Option item style attribute	defaultStyle	object	All	optional
searchClass	Search component class attribute - pass your customized classes in here	defaultClass	string	All	optional
searchStyle	Search component style attribute	defaultStyle	object	All	optional
searchContainerClass	Search Container class attribute - pass your customized classes in here	defaultClass	string	All	optional
searchContainerStyle	Search Container style attribute	defaultStyle	object	All	optional

Collaborators

• Bolaji Tijani - Product Manager
• Keefayah Kemi - Product Designer
• Daniel Olagunju - Developer

Acknowledgement

• Charles Odili
• AltSchool TalentQL Pipeline Team