rfs

react-form-states-select

A state select component for React forms

Showing:

Popularity

Downloads/wk

23

GitHub Stars

0

Maintenance

Last Commit

4yrs ago

Contributors

1

Package

Dependencies

2

Size (min+gzip)

16.1KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

react-form-states-select

MIT Licence Codeship Status for adamwysocki/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

ParameterTypeDescription
onChangefunctionCallback with the selected state. Parameters are the HTML event and an object with the format { name: 'Maryland', abbreviation: 'MD' }
defaultOptionTextstringThe label to display for the default/unselected option. A user selecting this option will not fire the callback. (default: "Select a state ...")
hasDefaultOptionbooleanToggle the default option on or off (default: true)
valueTemplatestringA 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"
styleObjectJavascript object with camelCased CSS properties rather than a CSS string. Standard React styles
classNamestringA CSS class name. The presence of this attribute will override all default styles. So it's all or none

Build

yarn run build
npm run build

Test

yarn run test
npm run test

Lint

yarn run lint
npm run lint

Flow

yarn run flow
npm run flow

License

MIT

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial