UNPKG

navrary-util-components

Version:

This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

naveowo.github.io/navrary-util-components

NaveOWO/navrary-util-components

64 lines (49 loc) • 4.95 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
### Select 사용자가 여러 옵션 중 하나를 선택할 수 있도록 하는 컴포넌트 입니다. ### Basic Usage ```jsx <Select> <Select.Trigger /> <Select.Value>apple</Select.Value> <Select.OptionGroup> <Select.Option id="orange">Orange</Select.Option> <Select.Option id="apple">Apple</Select.Option> <Select.Option id="grape">Grape</Select.Option> </Select.OptionGroup> </Select> ``` ### API **Select** | Prop | Type | Default | Description | | ----------------------- | ---------------------- | ------- | -------------------------------------------------------------------------- | | externalSelectedOption? | `T = any` | - | external select state | | defalutSelected? | `T = any` | - | default select state | | onSelectChange? | `(option : T) => void` | - | external select setState. should be accompanied by externalSelectedOption. | | externalOpen? | `boolean` | - | external open state | | defaultOpen? | `boolean` | - | default open state | | onOpenChange? | `() => void` | - | external open setState. should be accompanied by externalOpen. | **Trigger** | Prop | Type | Default | Description | | -------------- | ------------------------- | ------- | ----------------------------------------------------------------------------------------------------- | | asChild? | `boolean` `undefined` | false | Change the default rendered element for the one passed as a child, merging their props and functions. | | className? | `string` | - | styling props for target component | | onTriggerClick | `(e: MouseEvent) => void` | - | external function to control trigger component. | **OptionGroup** | Prop | Type | Default | Description | | ---------- | --------------------- | ------- | ----------------------------------------------------------------------------------------------------- | | asChild? | `boolean` `undefined` | false | Change the default rendered element for the one passed as a child, merging their props and functions. | | className? | `string` | - | styling props for target component | **Option** | Prop | Type | Default | Description | | ------------- | ------------------------- | ------- | ----------------------------------------------------------------------------------------------------- | | asChild? | `boolean` `undefined` | false | Change the default rendered element for the one passed as a child, merging their props and functions. | | className? | `string` | - | styling props for target component | | onOptionClick | `(e: MouseEvent) => void` | - | external function to control option component. | | id | `T = any` | - | props used to identify an option. | **Value** | Prop | Type | Default | Description | | ------------ | ------------------------- | ------- | ----------------------------------------------------------------------------------------------------- | | asChild? | `boolean` `undefined` | false | Change the default rendered element for the one passed as a child, merging their props and functions. | | className? | `string` | - | styling props for target component | | options | `Record<number, T = any>` | - | external object to match option with specific value. | | defaultValue | `T = any` | - | default value. |