react-chinese-city-selector

A React chinese city selector component

Install

npm install react-chinese-city-selector

Usage

import CitySelector from "react-chinese-city-selector";
import "react-chinese-city-selector/dist/index.css";

<CitySelector value={text} onSelect={onSelect}></CitySelector>

Example

function App() {
  const onSelect = (
    e: React.MouseEvent<HTMLElement>,
    data: { province: string; city: string }
  ) => {
    console.log("Do something");
  };
  return (
   <div className="App">
      <div
        style={{
          width: "220px",
          height: "40px",
          margin: "0 auto",
          marginTop: "10px",
        }}
      >
        <CitySelector
          size="medium"
          value={"沈阳市"}
          onSelect={onSelect}
        ></CitySelector>
      </div>
    </div>
  );
}

Properties

| name | type | description | | ----------- | :------: | :------------------------------------------------------------------: | | value | {string} | 初始值，例如“沈阳市“ | | placeholder | {string} | 自定义 placeholder | | onSelect | {func} | 回调方法，返回省份及城市信息 | | size | {string} | 字体大小，例如”mini，tiny，small，medium，large，big，huge，massive“ |