https://github.com/jasonboy/react-china-location

React Component for china-location
https://github.com/jasonboy/react-china-location

china china-city china-location component react

Last synced: 2 months ago
JSON representation

React Component for china-location

• Host: GitHub
• URL: https://github.com/jasonboy/react-china-location
• Owner: JasonBoy
• License: mit
• Created: 2017-05-10T10:40:18.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-06T21:30:24.000Z (about 2 years ago)
• Last Synced: 2024-10-05T02:30:52.217Z (3 months ago)
• Topics: china, china-city, china-location, component, react
• Language: JavaScript
• Size: 1.18 MB
• Stars: 13
• Watchers: 3
• Forks: 1
• Open Issues: 15
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-china-location [![npm](https://img.shields.io/npm/v/react-china-location.svg)](https://www.npmjs.com/package/react-china-location)

React Component for [china-location](https://github.com/JasonBoy/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](https://raw.githubusercontent.com/JasonBoy/react-china-location/master/demo/demo.png)

## Usage

`npm install china-location react-china-location --save` or  

`yarn add china-location react-china-location`

```javascript

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 () {

    return (

      

    )

  }

}

```

### Props

- `className`: pass custom css class to the component root element

- `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