# react-auto-scroll-time-select

> [![total](https://img.shields.io/npm/dt/react-auto-scroll-time-select.svg)](https://www.npmjs.com/package/react-auto-scroll-time-select) [![npm](https://img.shields.io/npm/v/react-auto-scroll-time-select.svg)](https://www.npmjs.com/package/react-auto-scro

Latest version **3.0.4** (published 2023-01-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-auto-scroll-time-select
pnpm add react-auto-scroll-time-select
yarn add react-auto-scroll-time-select
bun add react-auto-scroll-time-select
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.4 |
| Published | 2023-01-03 |
| First published | 2020-03-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 68.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | etiopiamokamame |
| Maintainers | etiopiamokamame |
| Keywords | react, auto, scroll, time, select |

## Links

- npm: https://www.npmjs.com/package/react-auto-scroll-time-select
- Repository: https://github.com/etiopiamokamame/react-auto-scroll-time-select
- Homepage: https://github.com/etiopiamokamame/react-auto-scroll-time-select#readme
- Issues: https://github.com/etiopiamokamame/react-auto-scroll-time-select/issues
- npm.io page: https://npm.io/package/react-auto-scroll-time-select

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 3.0.4 (latest) — 2023-01-03
- 3.0.3 — 2022-05-20
- 3.0.2 — 2022-05-19
- 3.0.1 — 2022-05-05
- 2.4.1 — 2021-05-30
- 2.4.0 — 2021-05-21
- 2.3.0 — 2021-05-18
- 2.2.1 — 2021-04-04
- 2.2.0 — 2021-03-28
- 2.1.0 — 2020-12-27
- 2.0.8 — 2020-04-24
- 2.0.7 — 2020-04-19
- 2.0.6 — 2020-04-09
- 2.0.5 — 2020-04-09
- 2.0.4 — 2020-04-07
- … 12 more at https://npm.io/package/react-auto-scroll-time-select/versions

## README

# react-auto-scroll-time-select

[![total](https://img.shields.io/npm/dt/react-auto-scroll-time-select.svg)](https://www.npmjs.com/package/react-auto-scroll-time-select) [![npm](https://img.shields.io/npm/v/react-auto-scroll-time-select.svg)](https://www.npmjs.com/package/react-auto-scroll-time-select)

A select box that supports typescript.
You can select options that are separated by time.
Automatically scrolls to choices that match the entered value.

[Demo Site](https://etiopiamokamame.github.io/demo-react-auto-scroll-time-select/)

## Installation

```sh
$ yarn add react-auto-scroll-time-select @emotion/css
```

## Usage

```tsx
import Select, { OptionType } from "react-auto-scroll-time-select";

<Select onChange={setOption} value={option} />;
```

## Export Types

| Name            | Type                                |
| :-------------- | :---------------------------------- |
| OptionType      | { label: string; value: string; }   |
| InputValueType  | string &#124; null &#124; undefined |
| StyleConfigType | { [key: string]: any }              |

## Props

| Prop                     | Default      | Type                                                 | Detail                                                      |
| :----------------------- | :----------- | :--------------------------------------------------- | :---------------------------------------------------------- |
| span                     | 30 (minutes) | number                                               | Choice time interval                                        |
| hourLimit                | 24 (hours)   | number                                               | Limit time                                                  |
| value                    |              | OptionType &#124; null                               | The time you have selected                                  |
| onChange                 |              | (option: OptionType &#124; null) => void;            | Select change event                                         |
| findOption               |              | (option: OptionType, input: InputValueType) => void; | An event that finds options to scroll from input characters |
| isClearable              | true         | boolean                                              | If true, display the button to clear                        |
| styles                   |              | { select, control, ... }                             | See [Custom Style](#custom-styles)                          |
| menuPortalTarget         |              |                                                      | Element to add selection menu                               |
| defaultScrollOptionValue |              | string                                               | Default display value                                       |
| hideOptions              | []           | string[]                                             | Specify options to hide                                     |
| disabledOptions          | []           | string[]                                             | Specify options to disabled                                 |
| startTime                | 00:00        | string                                               | Specify the start time                                      |

## Custom Styles

### Examples

```tsx
<Select
  styles={{
    select: (config: StyleConfigType) => ({
      ...config,
      width: 200,
    }),
    control: () => ({}),
  }}
/>
```

### Styles Props

| props                | Detail                 |
| :------------------- | :--------------------- |
| select               | Select box outline     |
| control              | Select box inner frame |
| inputForm            | input field            |
| clearValue           | Clear button           |
| dropDownArrowWrapper | Dropdown outline       |
| dropDownArrowItem    | Dropdown items         |
| selectOptions        | Selection menu outline |
| optionMenu           | Selection menu items   |

## Full Custom Example

```tsx
import React, { useState, useEffect } from "react";
import Select, {
  OptionType,
  InputValueType,
  StyleConfigType,
} from "react-auto-scroll-time-select";

const App = () => {
  const [option, setOption] = useState<OptionType | null>();

  useEffect(() => {
    console.log(option);
  }, [option]);

  return (
    <Select
      onChange={setOption}
      value={option}
      span={15}
      hourLimit={33}
      findOption={(option: OptionType, inputValue: InputValueType) =>
        option.value === inputValue
      }
      isClearable={false}
      styles={{
        select: (config: StyleConfigType) => ({
          ...config,
          width: 500,
        }),
        control: (config: StyleConfigType) => ({
          ...config,
          width: 500,
        }),
        inputForm: (config: StyleConfigType) => ({
          ...config,
          width: "100%",
          backgroundColor: "#d69a9a",
        }),
        clearValue: (config: StyleConfigType) => ({
          ...config,
          width: 30,
          backgroundColor: "#000000",
          color: "white",
        }),
        dropDownArrowWrapper: (config: StyleConfigType) => ({
          ...config,
          width: 50,
          backgroundColor: "#a1a8b7",
          "&:hover > div": {
            borderColor: "rgba(255, 0, 0, 0.5) transparent transparent",
          },
        }),
        dropDownArrowItem: (config: StyleConfigType) => ({
          ...config,
          borderColor: "#a73c3c transparent transparent",
        }),
        selectOptions: (config: StyleConfigType) => ({
          ...config,
          width: 600,
          backgroundColor: "#000000",
        }),
        optionMenu: (config: StyleConfigType) => ({
          ...config,
          color: "green",
        }),
      }}
      menuPortalTarget={document.body}
      defaultScrollOptionValue="09:00"
      hideOptions={["01:30"]}
      disabledOptions={["02:00"]}
      startTime={"01:00"}
    />
  );
};

export default App;
```

## License

MIT

---
_Source: https://npm.io/package/react-auto-scroll-time-select · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._