![New axobject-query Maintainer Faces Backlash Over Controversial Decision to Support Legacy Node.js Versions](https://cdn.sanity.io/images/cgdhsj6q/production/86e6ebdea652d20da070ebbda20134b839972db7-1024x1024.webp?w=800&fit=max&auto=format)
Security News
New axobject-query Maintainer Faces Backlash Over Controversial Decision to Support Legacy Node.js Versions
A JavaScript library maintainer is under fire after merging a controversial PR to support legacy versions of Node.js.
@leafygreen-ui/search-input
Advanced tools
Readme
yarn add @leafygreen-ui/search-input
npm install @leafygreen-ui/search-input
import {
SearchInput,
SearchResult,
SearchResultGroup,
} from '@leafygreen-ui/search-input';
<SearchInput
className={css`
width: 200px;
`}
onChange={() => {
console.log('SB: Change');
}}
aria-label="some label"
>
<SearchResult
onClick={() => {
console.log('SB: Click Apple');
}}
description="This is a description"
>
Apple
</SearchResult>
<SearchResult>Banana</SearchResult>
<SearchResult as="a" href="#" description="This is a link">
Carrot
</SearchResult>
<SearchResult description="This is a very very long description. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.">
Dragonfruit
</SearchResult>
<SearchResultGroup label="Peppers">
<SearchResult description="A moderately hot chili pepper used to flavor dishes">
Cayenne
</SearchResult>
<SearchResult>Ghost pepper</SearchResult>
<SearchResult>Habanero</SearchResult>
<SearchResult>Jalapeño</SearchResult>
<SearchResult>Red pepper</SearchResult>
<SearchResult>Scotch bonnet</SearchResult>
</SearchResultGroup>
</SearchInput>;
Prop | Type | Description | Default |
---|---|---|---|
darkMode | boolean | Determines whether or not the component appears in dark theme. | false |
state | 'none' , 'loading' , | The current state of the SearchInput. | none |
size | 'small' , 'default' , 'large' | Determines the font size, padding and spacing. | default |
disabled | boolean | Determines whether the field is currently disabled. | false |
value | string | The current value of the text box. | '' |
placeholder | string | The placeholder text shown in the input field before the user begins typing. | Search |
aria-labelledby | string | A value for aria-labelledby . Allows use of the component with an external <label> element. | |
aria-label | string | A value for aria-label . Allows use of the component without a label . | |
onChange | ChangeEventHandler<HTMLInputElement> | Callback fired when the input value changes. Use this callback to filter the SearchResult options. | |
onSubmit | FormEventHandler<HTMLFormElement> | Callback fired when a search result is clicked, or the enter key is pressed. | '' |
... | native form attributes | Any other properties will be spread on the root form element. |
Prop | Type | Description | Default |
---|---|---|---|
children | React.ReactNode | The value of the result. | |
description | React.ReactNode | Optional description text. | |
onClick | React.MouseEventHandler | Callback fired when the option is clicked. | |
as | React.ElementType | The component or element to render as. | li |
disabled | boolean | Prevents the option from being selectable. | false |
highlighted | boolean | Defines the currently highlighted option element for keyboard navigation. Not to be confused with selected, which identifies the currently selected option | false |
selected | boolean | Whether the component is selected, regardless of keyboard navigation | false |
href | string | href is required for Anchor tags | |
... | native as attributes | Any other properties will be spread on the root as element. |
Prop | Type | Description | Default |
---|---|---|---|
children | React.ReactNode | Must be <SearchResult/> or <SearchResultGroup/> . | |
label | string | Title for the group of options. | |
... | native div attributes | Any other properties will be spread on the root div element. |
FAQs
leafyGreen UI Kit Search Input
The npm package @leafygreen-ui/search-input receives a total of 8,880 weekly downloads. As such, @leafygreen-ui/search-input popularity was classified as popular.
We found that @leafygreen-ui/search-input demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 5 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
A JavaScript library maintainer is under fire after merging a controversial PR to support legacy versions of Node.js.
Security News
Results from the 2023 State of JavaScript Survey highlight key trends, including Vite's dominance, rising TypeScript adoption, and the enduring popularity of React. Discover more insights on developer preferences and technology usage.
Security News
The US Justice Department has penalized two consulting firms $11.3 million for failing to meet cybersecurity requirements on federally funded projects, emphasizing strict enforcement to protect sensitive government data.