React-form-states-select NPM

react-form-states-select

A React select component that displays contains the 50 US states (plus territories) and fires a callback when a new one is selected.

Installation

yarn add react-form-states-select

- or -

npm install react-form-states-select

Usage

1 . Require react-form-states-select after installation

import StatesSelect from "react-form-states-select";

2 . Include react-form-states-select component

onStateSelect = (event, state) => {
    // event {SyntheticEvent<HTMLSelectElement>} - React HTML event
    // state {Object} - Object representing the state
    // state.name {string} - The full name of the selected state
    // state.abbreviation {string} - The two letter abbreviation of the states name
}

<StatesSelect onChange={this.onStateSelect} />

Parameters

Parameter	Type	Description
onChange	`function`	Callback with the selected state. Parameters are the HTML event and an object with the format { name: 'Maryland', abbreviation: 'MD' }
defaultOptionText	`string`	The label to display for the default/unselected option. A user selecting this option will not fire the callback. (default: "Select a state ...")
hasDefaultOption	`boolean`	Toggle the default option on or off (default: true)
valueTemplate	`string`	A template to customize how the label in the drop down is displayed. NAME will display the full state name. ABBR will display the two character state abbreviation. (default: NAME). These can be used in combination. ie. "(ABBR) - NAME" which will display "(MD) - Maryland"
style	`Object`	Javascript object with camelCased CSS properties rather than a CSS string. Standard React styles
className	`string`	A CSS class name. The presence of this attribute will override all default styles. So it's all or none