# scoops-headless > #### Scoops-headless is a headless ui component like [HeadlessUI](https://headlessui.com/) Latest version **0.0.9** (published 2023-09-28) · MIT license · 0 weekly downloads ## Install ```sh npm install scoops-headless pnpm add scoops-headless yarn add scoops-headless bun add scoops-headless ``` ## Health **Score 30/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities; high quality score. Warnings: low downloads; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.0.9 | | Published | 2023-09-28 | | First published | 2023-08-17 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 0 | | Unpacked size | 1.4 MB | | Known vulnerabilities | 0 | | Install scripts | no | | Maintainers | qusenazlas | ## Links - npm: https://www.npmjs.com/package/scoops-headless - Repository: https://github.com/20Scoops-CNX/react-ui-library - Homepage: https://github.com/20Scoops-CNX/react-ui-library#readme - Issues: https://github.com/20Scoops-CNX/react-ui-library/issues - npm.io page: https://npm.io/package/scoops-headless ## Recent versions - 0.0.9 (latest) — 2023-09-28 - 0.0.8 — 2023-09-20 - 0.0.7 — 2023-09-07 - 0.0.6 — 2023-09-06 - 0.0.5 — 2023-09-05 - 0.0.4 — 2023-08-24 - 0.0.3 — 2023-08-21 - 0.0.2 — 2023-08-17 - 0.0.1 — 2023-08-17 ## README # Scoops-headless #### Scoops-headless is a headless ui component like [HeadlessUI](https://headlessui.com/) ## 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\\[\] | | 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\ \| null) => void | | initialSelectedItem | Initial selected item | Generic\ \| 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\\[\]) => 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\ | | 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\\[\] | | 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\ \| 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\ \| null) => string | | initialSelectedItem | Initial selected item | Generic\ \| 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\\[\]) => 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\ | | 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\\[\] | | 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\ \| null) => void | | onItemsChange | Function called when the selected items change. | (v: Generic\\[\] \| null) => void | | selectedItems | Array of initially selected items. | Generic\\[\] | | onInputValueChange | Function called when the input value changes. | (val: string) => void | | itemToString | Function to convert an item to a string representation. | (val: Generic\ \| 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\ \[\]) => 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\ | | 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 | --- _Source: https://npm.io/package/scoops-headless · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._