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

``sh
yarn add react-form-states-select

- or -

npm install react-form-states-select
`

Usage

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

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

2 . Include react-form-states-select component

`js
onStateSelect = (event, state) => {
// event {SyntheticEvent} - 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
}


`

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 |

Build

`js
yarn run build
npm run build
`

Test

`js
yarn run test
npm run test
`

Lint

`js
yarn run lint
npm run lint
`

Flow

`js
yarn run flow
npm run flow
``

License

MIT