hector-munachi/rsl-component
Record type:
software
Creator:
hec
Host:
Reusable React Component for a user to select - Region, State and LGA in Nigeria
# rsl-component
A reusable React component that simplifies the process of adding Region, State, and LGA selection drop-downs to forms in web applications. This helps developers by eliminating the need to build these inputs from scratch.
If you're looking for a Vue 3 version of this reusable React component, check here.
đź”— **Demo**
## Installation
Install this package with npm or yarn:
```bash
# If you use npm:
npm install rsl-component
# Or if you use Yarn:
yarn add rsl-component
```
## Usage
Import and use the `InputRSL` component in your React component.
```javascript
import InputRSL from 'rsl-component';
```
## Example
When you use the `InputRSL` component in your form, you can pass down the `selectedRegion`, `selectedState`, and `selectedLga` values as props, and also pass down the corresponding `handleRegionChange`, `handleStateChange`, and `handleLgaChange` callback functions to update the state when the user makes selections.
Here's an example of how you can use the `InputRSL` component in a form:
```javascript
import React, { useState } from 'react';
import InputRSL from 'rsl-component'; // Import the InputRSL component
const MyForm = () => {
const [formData, setFormData] = useState({
region: '',
state: '',
lga: '',
});
const handleFormSubmit = (e) => {
e.preventDefault();
// Access the selected values from the form data state
const { region, state, lga } = formData;
// Perform form submission with the selected values
// ... Your form submission logic here ...
};
const handleRegionChange = (region) => {
setFormData(prevFormData => ({ ...prevFormData, region }));
};
const handleStateChange = (state) => {
setFormData(prevFormData => ({ ...prevFormData, state }));
};
const handleLgaChange = (lga) => {
setFormData(prevFormData => ({ ...prevFormData, lga }));
};
return (
{/* Render the InputRSL component with props and callbacks */}
{/* ...Other form inputs and submit button... */}
);
};
export default MyForm;
```
In this example, the `fo …