React-form-prefixes-select NPM

react-form-prefixes-select

A React select component that displays name prefixes (Mr, Mrs, Ms) for react forms and fires a callback when a new one is selected.

Installation

yarn add react-form-prefixes-select

- or -

npm install react-form-prefixes-select

Usage

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

import PrefixesSelect from "react-form-prefixes-select";

2 . Include react-form-prefixes-select component

onPrefixSelect = (event, prefix) => {
    // event {SyntheticEvent<HTMLSelectElement>} - React HTML event
    // prefix {Object} - Object representing the prefix
    // prefix.label {string} - The display label of the selected prefix
    // prefix.code {string} - The two or three letter abbreviation of the prefix (unique to the collection)
}

<PrefixesSelect onChange={this.onPrefixSelect} />

Parameters

Parameter	Type	Description
onChange	`function`	Callback with the selected prefix. Parameters are the HTML event and an object with the format { label: 'Mrs', code: 'MRS' }
defaultOptionText	`string`	The label to display for the default/unselected option. A user selecting this option will not fire the callback. (default: "Prefix")
hasDefaultOption	`boolean`	Toggle the default option on or off (default: true)
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
common	`boolean`	If present, the select will only contain the most common prefixes (Dr, Mr, Mrs, Miss). If not present, display all prefixes.

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

react prefix name firstname lastname react-component

eslint webpack

@infinitebrahmanuniverse/nolb-react-fo @everything-registry/sub-chunk-2556 @zalastax/nolb-react-fo

0.1.0

8 years ago