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

@neoauto-ui/autocomplete

v1.6.0

Published

A React component that is a base autocomplete.

Downloads

3

Readme

Autocomplete

The autocomplete is a normal text input enhanced by a panel of suggested options.

Installation

yarn add @neoauto-ui/autocomplete

Import

import { Autocomplete } from '@neoauto-ui/autocomplete';

Basic Usage

<Box maxWidth="220px">
  <Autocomplete
    options={[
      { id: 1, label: 'kia tucson' },
      { id: 2, label: 'mitsubishi accent' }
    ]}
    placeholder="Buscar" />
</Box>

Options structure

const options = [
  { id: 1, label: 'kia tucson' }
];

// or

const options = [
  { id: 1, label: 'kia tucson', value: 'https://www.google.com.pe' }
];

Autocomplete sizes

Use the size prop to change the size of the input. You can set the value to xs, sm, md, or lg.

<Group>
  <Autocomplete
    size="lg"
    options={[
      { id: 1, label: 'kia tucson' },
      { id: 2, label: 'mitsubishi accent' }
    ]}
    placeholder="Buscar" />
  <Autocomplete
    size="md"
    options={[
      { id: 1, label: 'kia tucson' },
      { id: 2, label: 'mitsubishi accent' }
    ]}
    placeholder="Buscar" />
  <Autocomplete
    size="sm"
    options={[
      { id: 1, label: 'kia tucson' },
      { id: 2, label: 'mitsubishi accent' }
    ]}
    placeholder="Buscar" />
  <Autocomplete
    size="xs"
    options={[
      { id: 1, label: 'kia tucson' },
      { id: 2, label: 'mitsubishi accent' }
    ]}
    placeholder="Buscar" />
</Group>

Autocomplete loading state

Pass the isLoading prop to show its loading state.

<Box maxWidth="220px">
  <Autocomplete
    options={[]}
    isLoading
    placeholder="Buscar" />
</Box>

Autocomplete disabled state

Pass the isDisabled prop to disabled button action.

<Box maxWidth="220px">
  <Autocomplete
    options={[]}
    isDisabled
    placeholder="Buscar" />
</Box>

Autocomplete display

To take full width of the parent element, use isFullWidth prop.

<Box maxWidth="100%">
  <Autocomplete
    options={[
      { id: 1, label: 'kia tucson' },
      { id: 2, label: 'mitsubishi accent' }
    ]}
    isFullWidth
    placeholder="Buscar" />
</Box>

Input error

To add an error state to the input, use the isInvalid prop.

You can also pass the errorMessage prop to display an error text at the bottom of the input.

<Box maxWidth="220px">
  <Autocomplete
    options={[]}
    isInvalid
    errorMessage="Mensaje de error"
    placeholder="Buscar" />
</Box>

Input label

To add a label to the input, use the label prop.

You can also pass the labelColor prop to change the color of the label.

<Box maxWidth="220px">
  <Autocomplete
    options={[]}
    label="Marcas"
    labelColor="#FA0000"
    placeholder="Buscar" />
</Box>

Autocomplete regexPattern

By default, the autocomplete component accepts all characters. But if you want to config that, you can pass the regexPattern prop.

<Box maxWidth="220px">
  <Autocomplete
    placeholder="Buscar"
    regexPattern={/^\s+|[^0-9a-zA-Zñ -]/g} />
</Box>

Custom Autocomplete

You can also give the icon prop to render the icon inside autocomplete component and custom the color.

If you want to change the focus color, you can pass the prop focusBorderColor and also you can change the close icon color with the closeIconColor.

<Autocomplete
  options={[
    { id: 1, label: 'kia tucson' },
    { id: 2, label: 'mitsubishi accent' }
  ]}
  icon={<Search />}
  placeholder="Buscar"
  focusBorderColor="#FA9300"
  closeIconColor="#000000" />

Async Autocomplete

You can receive async options in Autocomplete component.

const AutocompleteAsync = () => {
  const [isLoading, setIsLoading] = useState(false);
  const [isOpen, setIsOpen] = useState(false);
  const [options, setOptions] = useState([]);

  const fetchAutocomplete = () => {
    setIsOpen(false);
    setIsLoading(true);
    fetch('https://retoolapi.dev/VEm6w1/autocomplete')
      .then(res => res.json())
      .then(data => {
        setIsLoading(false);
        setIsOpen(true);
        setOptions(data);
      })
      .catch(error => {
        setIsLoading(false);
        setIsOpen(false);
        console.error(error);
      });
  };

  const handleInput = () => {
    fetchAutocomplete();
  };

  return (
    <Autocomplete
      isFullWidth
      async
      options={options}
      placeholder="Buscar"
      focusBorderColor="#FA9300"
      closeIconColor="#000000"
      icon={<Search />}
      isLoading={isLoading}
      isOpen={isOpen}
      onInput={handleInput}
      onChange={(data) => console.log(data, 'onChange')}
      onClickItem={(value) => console.log(value, 'onClickItem')}
      onClickIcon={() => console.log('onClickIcon')} />
  );
};
  <Box maxWidth="368px" isFullWidth>
    <AutocompleteAsync />
  </Box>

Props

| Name | Type | Description | Default | |------------------- | ------------- | ----------- | ------- | | options | Array | The value must be chosen from a predefined set of allowed values. | - | | name | String | - | - | | defaultId | String | You can set defaultId if you want to preload id | - | | value | String | You can set value if you want to preload value | - | | onChange | Func | Callback when the autocomplete change | - | | onInput | Func | Callback when the text of input change | - | | onEnter | Func | Callback when the user press Enter key | - | | placeholder | String | - | - | | autoComplete | String | - | 'off' | | isReadOnly | Bool | If true, the form control will be readonly | false | | size | xs,sm,md,lg | - | 'md' | | isInvalid | Bool | If true, the form control will be invalid | false | | focusBorderColor | String | The border color when the autocomplete is focused. | - | | isLoading | Bool | - | false | | isDisabled | Bool | - | false | | onClickItem | Func | Callback when click item results | - | | label | String | - | - | | labelColor | String | - | '#000000' | | errorMessage | String | - | - | | isOpen | Bool | - | false | | async | Bool | If true, autocomplete wait for option results | false | | isFullWidth | Bool | If true, the autocomplete element will span the full width of its parent. | false | | icon | Node | The icon element to use in the autocomplete. | - | | iconColor | String | The color of the icon. | - | | onClickIcon | Func | Callback when click on icon | - | | closeIconColor | String | - | '#757575' | | loadingIconColor | String | - | '#FA9300' | | regexPattern | RegExp | - | - |