react-naija-states

Select component containing the various states and local governments in Nigeria

Usage no npm install needed!

<script type="module">
  import reactNaijaStates from 'https://cdn.skypack.dev/react-naija-states';
</script>

README

react-naija-states

Options component for select input containing the various states , senetorial districts and local governments in Nigeria

NPM JavaScript Style Guide Made with naija-state-local-government

Install

npm install --save react-naija-states

Usage

import React, { useState } from 'react'

import { Options } from 'react-naija-states'
import 'react-naija-states/dist/index.css'

const App = () => {
    const [stateValue, setStateValue] = useState('');
    const [LGAValue, setLGAValue] = useState('');
    const [senDisValue, setSenDisValue] = useState('');

    const handleChange = (event)=>{
        ...
    }
    const handleStateChange = (event)=>{
        ...
    }
    const handleLGAChange = (event)=>{
        ...
    }
    return (
        <div className='App'>
            <h1>Options Demo</h1>
            <label htmlFor="state">States</label>
            <select
                name='state'
                placeholder='Please select a State'
                value={stateValue || ''}
                onChange={handleStateChange} >
                    <Options type='state'/>
            </select>
            <label htmlFor="lga">Local Government Areas</label>
            <select
                name='lgs'
                placeholder='Please select a LGA'
                value={LGAValue || ''}
                onChange={handleLGAChange} >
                    <Options type='lga' state={stateValue} />
            </select>
            <label htmlFor="sen-district">Senetorial Districts</label>
            <select
                name='sen-district'
                placeholder='Please select a Senatorial Districts'
                value={senDisValue || ''}
                onChange={setSenDisValue} >
                    <Options type='sen-district' state={stateValue} />
            </select>
        </div>
    );
}

export default App

License

MIT © Otagera