@togglhire/downshift-search
v0.1.2
Published
This component using React and [Emotion](https://emotion.sh) for styling.
Downloads
11
Maintainers
Keywords
Readme
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:
- 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.
- Generates TypeScript definition files with the TypeScript compiler, so that the package can be used in TypeScript apps without losing type information.