drop-it-like-is-hot v1.0.6

DropItLikeIsHot

Description

A light weight dropdown for simple needs. As much as possible DropItLikeIsHot doesn't hold its own state, but rather it needs to be handled by its parent, this way is essayer to customize behavior.

Features

• customizable with you own styles
• accepts your own async function
• debounce api requests when user types
• optimized items rendering in case of large list of options
• render dropdown's flyout above the input in case is out of view port

Requirements

• use the component in a react app, and event better if is in typescript environment

Installation

npm install --save 'drop-it-like-is-hot'

Usage

import { DropItLikeIsHot } from "drop-it-like-is-hot";
import "drop-it-like-is-hot/dist/style.css";

export default function App() {
  const [value, setValue] = useState("");

  const optionsCallback = useCallback(
    (searchString: string) =>
      fetch(`https://example.com?searchAtrribute=${searchString}`)
        .then((r) => r.json())
        .then((data: { id: string; name: string }[]) => {
          return data
            .map(({ id, name }) => ({ id, label: name }))
        }),
    []
  );

  return (
    <div className="App">
      <DropItLikeIsHot
        value={value}
        onChange={(value) => setValue(value)}
        onSelect={(_, label) => setValue(label)}
        optionsCallback={optionsCallback}
      />
    </div>
  );
}

Replace your "fetch" with your api call, what is important that the "optionsCallback" return a Promise that resolves with and array that have the following structure:

{
    "id": "string",
    "label": "string"
}

Playground

You can check directly the component on code sandbox: An Internal Link

Component Props

About this repo

This a repo that can build it self as a library of components, checkout the following file:

/.github/workflows/publish.yml

Technologies

• Typescript
• ReactJS
• Vite
• React Testing Library
• CI/CD with GitHub Actions

Running locally

First you need to install NodeJS on your local machine. The open a terminal and follow the next steps:

git clone https://github.com/StefanRadusi/drop-it-like-is-hot
cd drop-it-like-is-hot
npm install
npm run dev

After that open a browser and go to: http://localhost:5173/