Getting Started

A React Library for fetching States and districts of India. npm i state-district-component.

With create-react-app

create-react-app is a popular CLI tool to getting started with React. If you're new to React or Webpack, you might be starting out here. This section will walk you through configuring create-react-app to install and use our components.

If you're using an older version (v1) of create-react-app, please refer to our create-react-app-v1 doc.

Recommended things to know

1. node/npm
2. JavaScript
3. HTML/CSS
4. ES6

NOTE: If you haven't used create-react-app before, you may want to read the Overview Guide.

Step 1: Install Components

Install Component:

npm i state-district-component

Step 2: Use State and District Components

import React, { useState } from "react";
import "./App.css";
import { States, Districts } from "state-district-component";
const App = () => {
  const [state, setState] = useState();
  const [district, setDistrict] = useState();
  const styles = {
    // pass the styles in the style props of component
    width: "230px",
    outline: "none",
    padding: "10px",
    background: "rgb(227, 226, 226)",
    border: "none",
    borderRadius: "6px",
  };
  const getStateValue = (value) => {
    // for geting  the input value pass the function in oChnage props and you will get value back from component
    setState(value);
  };
  const getDistrictValue = (value) => {
    setDistrict(value);
  };
  return (
    <>
      <States styles={styles} onChange={getStateValue} />
      <Districts state={state} onChange={getDistrictValue} />
      {/*pass the state props to District component the name of state for which you want to get districts */}
    </>
  );
};

export default App;

Components

| Component | Props | | --------- | ------------------------------- | | States | className , styles ,onChange | | District | className,style ,onChange,State |

Porps Usage

| Porp | Usage | | --------- | ----------------------------------------------------------------------------------------------------- | | className | pass className prop to give input component a class name and you can style it by targeting class name | | styles | you can pass style project to get style to input | | state | pass the state prop only for District component for Indian state which you want to get districts | | onChange | will give back the value of the input |

Other usage

Geting arrays of state and districts

import { allStates, allDistricts } from "state-district-component";

Above imports are array of state and distrct you can use it for your project if you dont want to use States and Districts components ,if you want make custom comoponents