React-auto-scroll-time-select NPM

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

Installation

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

Usage

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 \| null \| 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 \| null	The time you have selected
onChange		(option: OptionType \| 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
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

<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

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;