scoops-headless v0.0.9
Scoops-headless
Scoops-headless is a headless ui component like HeadlessUI
Components
Modal
Props | Description | Type |
---|---|---|
isOpen | Is modal open | boolean |
setIsOpen | set modal open state | (open: boolean) => void |
disabledOutsideDismiss | disabled closing modal while clicking outside | boolean |
children | Children Element | ReactNode |
overlayClassName | overlay's class name | string |
transitions | transition config | TransitionConfig |
*TransitionConfig | transition setting | enter?: string; enterFrom?: string; enterTo?: string; leave?: string; leaveFrom?: string; leaveTo?: string; |
overlay | show overlay (backdrop) | boolean |
wrapperClassName | modal wrapper className | string |
portalClassName | modal wrapper className | string |
Drawer
Props | Description | Type |
---|---|---|
isOpen | Is modal open | boolean |
setIsOpen | set modal open state | (open: boolean) => void |
disabledOutsideDismiss | disabled closing modal while clicking outside | boolean |
children | Children Element | ReactNode |
overlayClassName | overlay's class name | string |
transitions | transition config | TransitionConfig |
*TransitionConfig | transition setting | enter?: string; enterFrom?: string; enterTo?: string; leave?: string; leaveFrom?: string; leaveTo?: string; |
overlay | show overlay (backdrop) | boolean |
side | which side the drawer appears | "top" , "bottom" , "left" , "right" |
portalClassName | modal wrapper className | string |
Popover
Popover.Wrapper
A component wraps the reference and panel components, handling the logic for showing/hiding the popover and managing its position.
Props | Description | Type |
---|---|---|
children (function) | A function receiving { isOpen, setIsOpen } to control popover state. | ({isOpen, setIsOpen}) => ReactNode |
overlay | Show overlay (backdrop). | boolean |
overlayClassName | Class name for overlay styling. | string |
portal | Render popover using a portal. Default is true . | boolean (optional) |
disabledOutsideDismiss | Disable dismissing on outside click. Default is false . | boolean (optional) |
strategy | Popover positioning strategy: "absolute" or "fixed". | "absolute" | "fixed" |
placement | Placement of the popover relative to the reference. | Placement |
offset | Offset options for popover positioning. | number | null, number | null |
fallbackPlacements | Fallback placements if primary placement is unavailable. | Array<Placement> |
portalClassName | modal wrapper className | string |
disableUpdateOnOpen | disable update ui function when popover is opening | boolean |
Popover.Panel
The Panel component contains the content displayed within the popover. | Props | Description | Type | | --- | --- | --- | | children | Content within the panel. | ReactNode | | className | Additional CSS class for styling. | string (optional) |
Popover.Reference
The Reference component functions as the popover's trigger element. When clicked, it toggles the popover's visibility.
Props | Description | Type |
---|---|---|
children | Content within the reference element. | ReactNode |
className | Additional CSS class for styling. | string (optional) |
SelectBox
SelectBox.Wrapper
A component serves as the main container for the select box. It manages the state and configuration for the select box and its related components.
Props | Description | Type |
---|---|---|
children | A function receiving parameters to control the select box. | ({ selected, active, openMenu, closeMenu, isOpen }) => ReactNode |
options | An array of options for the select box. | Generic\<T>[] |
isOpen | Optional boolean to control the initial open state. | boolean |
setIsOpen | Optional function to set the open state. | (val: boolean) => void |
onChange | Function called when the selected item changes. | (v: Generic\<T> | null) => void |
initialSelectedItem | Initial selected item | Generic\<T> | null |
SelectBox.Options
The SelectBox.Options component displays the available options within the select box
Props | Description | Type |
---|---|---|
children | A function receiving options to render. | (options: Generic\<T>[]) => ReactNode |
className | Optional CSS class name for styling. | string |
SelectBox.Option
The SelectBox.Option component represents an individual option within the select box.
Props | Description | Type |
---|---|---|
children | Content within the option element. | ReactNode |
item | The item associated with the option. | Generic\<T> |
index | The index of the option within the list. | number |
key | React's key prop (automatically generated). | string |
SelectBox.Reference
The SelectBox.Reference component serves as the trigger element for the select box. Clicking it opens or closes the dropdown.
Props | Description | Type |
---|---|---|
children | Content within the reference element. | ReactNode |
SelectBox.Label
The SelectBox.Label component displays a label for the select box. | Props | Description | Type | | --- | --- | --- | | children | Content within the reference element. | ReactNode |
ComboBox
ComboBox.Wrapper
The ComboBox.Wrapper component serves as the main container for the combo box. It manages the state and configuration for the combo box and its related components
Props | Description | Type |
---|---|---|
children | A function receiving parameters to control the combo box. | ({ selected, active, openMenu, closeMenu, isOpen }) => ReactNode |
options | An array of options for the combo box. | Generic\<T>[] |
isOpen | Optional boolean to control the initial open state. | boolean |
setIsOpen | Optional function to set the open state. | (val: boolean) => void |
onChange | Function called when the selected item changes. | (v: Generic\<T> | null) => void |
onInputValueChange | Function called when the input value changes. | (val: string) => void |
itemToString | Function to convert an item to a string representation. | (val: Generic\<T> | null) => string |
initialSelectedItem | Initial selected item | Generic\<T> | null |
ComboBox.Options
The ComboBox.Options component displays the available options within the combo box.
Props | Description | Type |
---|---|---|
children | A function receiving options to render. | (options: Generic\<T>[]) => ReactNode |
className | Optional CSS class name for styling. | string |
ComboBox.Option
The ComboBox.Option component represents an individual option within the combo box.
Props | Description | Type |
---|---|---|
children | Content within the option element. | ReactNode |
item | The item associated with the option. | Generic\<T> |
index | The index of the option within the list. | number |
key | React's key prop (automatically generated). | string |
ComboBox.Input
The ComboBox.Input component provides an input element for the combo box.
| Props | Description | Type |
| --- | --- | --- |
| className | Optional CSS class name for styling. | string |
| ...rest | Additional input attributes (e.g., placeholder
). | HTMLInputElement Attributes |
ComboBox.Label
The ComboBox.Label component displays a label for the combo box.
Props | Description | Type |
---|---|---|
children | Content within the label element. | ReactNode |
MultipleSelect
MultipleSelect.Wrapper
The MultipleSelect.Wrapper component serves as the main container for the multiple-select component. It manages the state and configuration for the multiple-select and its related components.
Props | Description | Type |
---|---|---|
children | A function receiving parameters to control the multiple-select. | ({ selected, active, openMenu, closeMenu, isOpen }) => ReactNode |
options | An array of options for the multiple-select. | Generic\<T>[] |
isOpen | Optional boolean to control the initial open state. | boolean |
setIsOpen | Optional function to set the open state. | (val: boolean) => void |
onSelectedItem | Function called when the selected item changes. | (v: Generic\<T> | null) => void |
onItemsChange | Function called when the selected items change. | (v: Generic\<T>[] | null) => void |
selectedItems | Array of initially selected items. | Generic\<T>[] |
onInputValueChange | Function called when the input value changes. | (val: string) => void |
itemToString | Function to convert an item to a string representation. | (val: Generic\<T> | null) => string |
MultipleSelect.Options
The MultipleSelect.Options component displays the available options within the multiple-select.
Props | Description | Type |
---|---|---|
children | A function receiving options to render. | (options: Generic\<T> []) => ReactNode |
className | Optional CSS class name for styling. | string |
MultipleSelect.Option
The MultipleSelect.Option component represents an individual option within the multiple-select.
Props | Description | Type |
---|---|---|
children | Content within the option element. | ReactNode |
item | The item associated with the option. | Generic\<T> |
index | The index of the option within the list. | number |
key | React's key prop (automatically generated). | string |
MultipleSelect.Input
The MultipleSelect.Input component provides an input element for the multiple-select.
Props | Description | Type |
---|---|---|
className | Optional CSS class name for styling. | string |
rest | Additional input attributes (e.g., placeholder ). | HTMLInputElement Attributes |
MultipleSelect.Label
The MultipleSelect.Label component displays a label for the multiple-select.
Props | Description | Type |
---|---|---|
children | Content within the label element. | ReactNode |
Transition
Prop | Description | Type |
---|---|---|
enter | Class to be applied when entering. | string |
enterFrom | Class to be applied when starting entering. | string |
enterTo | Class to be applied when finishing entering. | string |
leave | Class to be applied when leaving. | string |
leaveFrom | Class to be applied when starting leaving. | string |
leaveTo | Class to be applied when finishing leaving. | string |
show | Determines if the element is shown or not. | boolean |
children | Content to be transitioned. | ReactNode |
className | Additional CSS class name for styling. | string |