scoops-headless

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