React-nigeria-select NPM

React Nigeria Select

A React component for selecting Nigerian states and local government areas (LGAs).

Features

🇳🇬 Complete list of Nigerian states and LGAs
🎨 Customizable styling
⌨️ TypeScript support
🔄 Controlled and uncontrolled usage
📱 Mobile-friendly
🎯 Zero dependencies
♿ Accessible

Installation

npm install react-nigeria-select
# or
yarn add react-nigeria-select

Demo link https://stateselection-demo.vercel.app/

Usage

jsx or tsx import { NigeriaSelect } from 'react-nigeria-select';

function App() { const handleChange = ({ state, lga }) => { console.log(Selected state: ${state}, LGA: ${lga}); };

return ( ); }

Props

Prop	Type	Default	Description
onChange	(values: SelectionValue) => void	-	Callback when either state or LGA changes
onStateChange	(state: string) => void	-	Callback when state changes
onLGAChange	(lga: string) => void	-	Callback when LGA changes
defaultState	string	-	Initial state value
defaultLGA	string	-	Initial LGA value
className	string	-	Additional class for wrapper div
selectClassName	string	-	Additional class for select elements
labelClassName	string	-	Additional class for labels
showLabels	boolean	true	Show/hide labels
required	boolean	false	Make fields required
disabled	boolean	false	Disable both selects
loading	boolean	false	Show loading state

Using with React Hook Form

import { useForm, Controller } from 'react-hook-form';
import { NigeriaSelect } from 'react-nigeria-select';

function Form() {
  const { control } = useForm();

  return (
    <Controller
      name="location"
      control={control}
      render={({ field }) => (
        <NigeriaSelect
          onChange={field.onChange}
          required
        />
      )}
    />
  );
}

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

react nigeria states lga select form location

1.0.1

9 months ago

1.0.0

9 months ago