react-china-location

1.1.1 • Public • Published

react-china-location npm

React Component for china-location

It uses the simple html select/option tag, to use custom UI, install the china-location only and make your own UI component.

demo

Usage

npm install china-location react-china-location --save or yarn add china-location react-china-location

import locationData from 'china-location/dist/location.json';
import ChinaLocation from 'react-china-location';
 
class App extends React.Component {
  constructor (props) {
    super(props);
 
    this.onLocationChange = this.onLocationChange.bind(this);
 
    this.state = {
      currentLocation: {},
    }
  }
 
 
  onLocationChange (newLocation) {
    //{
    //  province: {code: '110000', name: '北京市'},
    //  city: {code: '110000', name: '北京市'},
    //  district: {code: '110101', name: '东城区'}
    //}
    console.log(newLocation);
    this.setState({
      currentLocation: newLocation,
    });
  }
 
  render () {
    <div>
      <ChinaLocation list={locationData} onLocationChange={this.onLocationChange}/>
    </div>
  }
}

Props

  • list: location data from china-location
  • onLocationChange: be notified when user select different option

Demo

Go to demo/build and open index.html in your browser.

LICENSE

MIT

Package Sidebar

Install

npm i react-china-location

Weekly Downloads

5

Version

1.1.1

License

MIT

Unpacked Size

1.22 MB

Total Files

15

Last publish

Collaborators

  • jasonboy