Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@s-ui/react-molecule-autosuggest
Advanced tools
`MoleculeAutosuggest` is an input that will display a list of suggestions while values are entered It allows Single and Multiple Selection
Readme
MoleculeAutosuggest
is an input that will display a list of suggestions while values are entered
It allows Single and Multiple Selection
$ npm install @s-ui/react-molecule-autosuggest --save
import MoleculeAutosuggest, { MoleculeAutosuggestDropdownListSizes } from '@s-ui/react-molecule-autosuggest'
import MoleculeAutosuggestOption from '@s-ui/react-molecule-dropdown-option'
const IconCloseTag = () => <span>x</span>
const IconClear = () => <span>x</span>
const suggestions = ['John','Johnny']
<MoleculeAutosuggest
value={'Jo'}
placeholder="Select an option..."
iconClear={<IconClose />}
state="success"
>
{suggestions.map((suggestion, i) => (
<MoleculeAutosuggestOption key={i} value={suggestion}>
{option}
</MoleculeAutosuggestOption>
))}
</MoleculeAutosuggest>
<MoleculeAutosuggest
value={'Jo'}
placeholder="Select an option..."
iconClear={<IconClose />}
size={MoleculeAutosuggestDropdownListSizes.LARGE}
>
{suggestions.map((suggestion, i) => (
<MoleculeAutosuggestOption key={i} value={suggestion}>
{option}
</MoleculeAutosuggestOption>
))}
</MoleculeAutosuggest>
<MoleculeAutosuggest
value={'Jo'}
placeholder="Select some options..."
iconCloseTag={<IconCloseTag />}
iconClear={<IconClear />}
multiselection
>
{suggestions.map((suggestion, i) => (
<MoleculeAutosuggestOption key={i} value={suggestion}>
{option}
</MoleculeAutosuggestOption>
))}
</MoleculeAutosuggest>
MoleculeAutosuggest
that handle StateMoleculeAutosuggest
is a stateless component so to manage dynamic options we need to create a wrapper component that manages this and pass proper props
and proper children (MoleculeAutosuggestOption
) to MoleculeAutosuggest
Example:
import React, {Component} from 'react'
import MoleculeAutosuggest from '@s-ui/react-molecule-autosuggest'
import MoleculeAutosuggestOption from '@s-ui/react-molecule-dropdown-option'
import {getAsyncCountriesFromQuery} from '../services'
export default class AutosuggestSingleWithAsyncOptions extends Component {
state = {value: '', options: []}
onChange = async (e, {value}) => {
const options = await getAsyncCountriesFromQuery({query: value})
this.setState({value, options})
}
render() {
const {options, value} = this.state
const {onChange, props} = this
return (
<MoleculeAutosuggest {...props} value={value} onChange={onChange}>
{options.map((option, i) => (
<MoleculeAutosuggestOption key={i} value={option}>
{option}
</MoleculeAutosuggestOption>
))}
</MoleculeAutosuggest>
)
}
}
so then, the AutosuggestSingleWithAsyncOptions
can used in this way...
<AutosuggestSingleWithAsyncOptions iconClear={<IconClear />} />
withDynamicOptions
It can be useful creating a hoc (like the one withDynamicOptions
available in the demo) that combined with other hoc from @s-ui/hoc
can be used to simplify the use of this component with dinamyc suggestions based on the value
withDynamicOptions
import React, {Component} from 'react'
export default (BaseComponent, BaseChildComponent) => getDynamicOptions => {
const displayName = BaseComponent.displayName
return class withDynamicOptions extends Component {
static displayName = `withDynamicOptions(${displayName})`
state = { options: []}
async componentDidUpdate({value: prevQuery}) {
const {value: query} = this.props
if (query !== prevQuery) {
const options = await getDynamicOptions({query})
this.setState({options}) // eslint-disable-line
}
}
render() {
const {props} = this
const {options} = this.state
return (
<BaseComponent {...props}>
{options.map((option, i) => (
<BaseChildComponent key={i} value={option}>
{option}
</BaseChildComponent>
))}
</BaseComponent>
)
}
}
}
use of withDynamicOptions
for creating a stateful version of MoleculeAutosuggest
import MoleculeAutosuggest from '@s-ui/react-molecule-autosuggest'
import MoleculeAutosuggestOption from '@s-ui/react-molecule-dropdown-option'
import withDynamicOptions from './hoc/withDynamicOptions'
import {withStateValue} from '@s-ui/hoc'
// some function that gets a `{query}` and returns asynchronoudly a list of values
import {getAsyncCountriesFromQuery} from './services'
const MoleculeAutosuggestWithDynamicOptions = withDynamicOptions(
MoleculeAutosuggest,
MoleculeAutosuggestOption
)(getAsyncCountriesFromQuery)
const MoleculeAutosuggestWithState = withStateValue(
MoleculeAutosuggestWithDynamicOptions
)
so then, the MoleculeAutosuggestWithState
can used in this way...
<MoleculeAutosuggestWithState
placeholder="Type a Country name..."
onChange={(_, {value}) => console.log(value)}
iconClear={<IconClear />}
/>
Find full description and more examples in the demo page.
FAQs
`MoleculeAutosuggest` is an input that will display a list of suggestions while values are entered It allows Single and Multiple Selection
The npm package @s-ui/react-molecule-autosuggest receives a total of 2,738 weekly downloads. As such, @s-ui/react-molecule-autosuggest popularity was classified as popular.
We found that @s-ui/react-molecule-autosuggest demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 69 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.