@s-ui/react-molecule-select-field

MoleculeSelectField

MoleculeSelectField is a component that wraps a composition of Label + some input (input, textarea, ...) + Validations Messages for a MoleculeSelect component

Installation

$ npm install @s-ui/react-molecule-select-field --save

Usage

After importing the component MoleculeSelectField like this

import MoleculeSelectField from '@s-ui/react-molecule-select-field' import MoleculeSelectOption from '@s-ui/react-molecule-dropdown-option' const IconCloseTag = () => <span>x</span> const IconArrowDown = () => <span>▼</span> const options = ['John','Paul','George','Ringo']

Basic usage

<MoleculeSelectField label="Country" placeholder="Select a Country..." onChange={(_, {value}) => console.log(value)} iconArrowDown={<IconArrowDown />} > {options.map((option, i) => ( <MoleculeSelectOption key={i} value={option}> {option} </MoleculeSelectOption> ))} </MoleculeSelectField>

Basic usage with multiselection

<MoleculeSelectField label="Country" placeholder="Select a Country..." onChange={(_, {value}) => console.log(value)} iconArrowDown={<IconArrowDown />} iconCloseTag={<IconCloseTag />} multiselection > {options.map((option, i) => ( <MoleculeSelectOption key={i} value={option}> {option} </MoleculeSelectOption> ))} </MoleculeSelectField>

With Error Message

<MoleculeSelectField label="Country" placeholder="Select a Country..." onChange={(_, {value}) => console.log(value)} iconArrowDown={<IconArrowDown />} errorText="Error!" > {options.map((option, i) => ( <MoleculeSelectOption key={i} value={option}> {option} </MoleculeSelectOption> ))} </MoleculeSelectField>

With Alert Message

<MoleculeSelectField label="Country" placeholder="Select a Country..." onChange={(_, {value}) => console.log(value)} iconArrowDown={<IconArrowDown />} alertText="Error!" > {options.map((option, i) => ( <MoleculeSelectOption key={i} value={option}> {option} </MoleculeSelectOption> ))} </MoleculeSelectField>

With Success Message

<MoleculeSelectField label="Country" placeholder="Select a Country..." onChange={(_, {value}) => console.log(value)} iconArrowDown={<IconArrowDown />} successText="Success!" > {options.map((option, i) => ( <MoleculeSelectOption key={i} value={option}> {option} </MoleculeSelectOption> ))} </MoleculeSelectField>

With Help Text

<MoleculeSelectField label="Country" placeholder="Select a Country..." onChange={(_, {value}) => console.log(value)} iconArrowDown={<IconArrowDown />} helpText="Read the instructions to write proper format" > {options.map((option, i) => ( <MoleculeSelectOption key={i} value={option}> {option} </MoleculeSelectOption> ))} </MoleculeSelectField>

State Management for this componente

Like MoleculeSelect, MoleculeSelectField can also use the withStateValue hoc to create a stateful version of this component

import {withStateValue} from '@s-ui/hoc' import MoleculeSelectField from '@s-ui/react-molecule-select-field' ... const MoleculeSelectFieldWithState = withStateValue(MoleculeSelectField)

Find full description and more examples in the demo page.