npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@leafygreen-ui/search-input

v2.1.6

Published

leafyGreen UI Kit Search Input

Downloads

52,220

Readme

Search Input

npm (scoped)

View on MongoDB.design

Installation

Yarn

yarn add @leafygreen-ui/search-input

NPM

npm install @leafygreen-ui/search-input

Example

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>;

Properties

| 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. | |

SearchResult

Props

| 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. |

SearchResultGroup

Props

| 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. | |