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.
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;
License
MIT