Downshift Search component

This component using React and Emotion for styling.

Installation

yarn add @togglhire/downshift-search

This package has peer dependencies, so make sure that react and react-dom are installed as well.

Usage

This is a component that offers combobox functionality. DownshiftSearch is controlled component, so it's expected to manage state in a parrent component.

Example:

import React, { useState } from "react";
import find from "lodash/find";
import { DownshiftSearch, DownshiftSearchItem } from "./downshift-search";

const positions: DownshiftSearchItem[] = [
  {
    id: "frontend",
    name: "Frontend Developer",
    type: "Technical",
  },
  {
    id: "backend",
    name: "Backend Developer",
    type: "Technical",
  },
  {
    id: "bookkeeper",
    name: "Bookkeeper",
    type: "Non-technical",
  },
  {
    id: "seo",
    name: "SEO Manager",
    type: "Leadership",
    premium: true,
  },
];

export const SomeParentComponent = () => {
  const [name, setName] = useState("");

  return (
    <DownshiftSearch
      items={positions}
      inputValue={name}
      onInputValueChange={(name) => setName(name)}
      onSelect={(id) => {
        if (!id) {
          setName("");
          return;
        }

        const item = find(positions, { id });

        if (item) {
          setName(item.name);
        }
      }}
    />
  );
};

donwshift-search.stories.tsx has a full list of different usage scenarios.

Development

This project uses Storybook. You can start it with yarn start.

Publishing to npm

This project uses semantic versioning:

• If a bug is fixed without changing any component props, bump the patch version.
• If you add props to a component or add new components, bump the minor version.
• If you remove or change props in a component or remove components, bump the major version.

Source files are automatically compiled to JavaScript before publishing to npm, so simply running npm publish --access public should work.

The build script does two things:

1. Compiles TypeScript files with Babel to JavaScript. It is easier to use Babel instead of TypeScript compiler as the Emotion Babel plugin must be used to process CSS-in-JS.
2. Generates TypeScript definition files with the TypeScript compiler, so that the package can be used in TypeScript apps without losing type information.