@s-ui/react-molecule-select-field
Advanced tools
Weekly downloads
Readme
MoleculeSelectField
is a component that wraps a composition of Label + some input (input, textarea, ...) + Validations Messages for a MoleculeSelect
component
$ npm install @s-ui/react-molecule-select-field --save
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']
<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>
<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>
<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>
<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>
<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>
<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>
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.
FAQs
Unknown package
The npm package @s-ui/react-molecule-select-field receives a total of 716 weekly downloads. As such, @s-ui/react-molecule-select-field popularity was classified as not popular.
We found that @s-ui/react-molecule-select-field demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.