Components
Single Select Menu
A Single Select Menu lets users choose one option from a list.
A Single Select Menu is useful for presenting a list of mutually exclusive options in a compact format. It maintains a clean interface, particularly when the number of options exceeds the recommended number of radio buttons.
Single Select Menu is part of the greater Menu ecosystem.Learn more
import { SingleSelectMenu } from '@sproutsocial/racine'() => {return (<Box display="flex" justifyContent="center" alignItems="center" height="100%"><SingleSelectMenuitemToString={(item) => (item ? TEST_BOOKS[item.index].title : "")}menuToggleElement={<MenuToggleButton>Select something</MenuToggleButton>}><MenuContent><MenuGroup id="books">{TEST_BOOKS.map(({ id, title }) => (<MenuItem key={id} id={id}>{title}</MenuItem>))}</MenuGroup></MenuContent></SingleSelectMenu></Box>)}
Properties
| Name | Type | Default | Description | Required? |
|---|---|---|---|---|
menuToggleElement | any | |||
popoutProps | Omit<TypePopoutProps, "isOpen" | "setIsOpen" | "content" | "children"> | |||
width | TypePopoutProps["width"] | |||
MenuRootComponent | TypeMenuRootProps | ({
children,
menuToggleElement,
popoutProps: { placement = "bottom", focusLockProps, ...popoutProps } = {},
width,
...contextProps
}: TypeMenuRootProps) => {
const {
isOpen,
openMenu,
closeMenu,
inputValue,
hiddenItemsCount = 0,
items,
getMenuProps,
} = contextProps;
const toggleElementRef = React.useRef<HTMLElement>(null);
const [finalWidth, setFinalWidth] = React.useState<typeof width>();
const min_width = 200;
useLayoutEffect(() => {
if (width) {
setFinalWidth(width);
} else if (toggleElementRef.current?.offsetWidth) {
const toggleWidth = toggleElementRef.current.offsetWidth;
setFinalWidth(Math.max(toggleWidth, min_width));
} else {
setFinalWidth(min_width);
}
}, [width, toggleElementRef.current?.offsetWidth]);
useEffect(() => {
if (!inputValue) return;
if (items && hiddenItemsCount >= items.length && isOpen) {
closeMenu?.();
}
}, [hiddenItemsCount, items?.length, isOpen, inputValue]);
const menuContext = useMenu(contextProps);
// Hack to suppress error: "downshift: You forgot to call the getMenuProps getter function on your component / element."
getMenuProps?.({}, { suppressRefError: true });
return (
<MenuPopout
placement={placement}
isOpen={!!isOpen}
openMenu={openMenu}
closeMenu={closeMenu}
content={
<MenuContentProvider menuContext={menuContext}>
{children}
</MenuContentProvider>
}
width={finalWidth}
{...popoutProps}
>
{(toggleProps) => (
<MenuToggleProvider
menuContext={{
...menuContext,
...toggleProps,
ref: mergeRefs<HTMLElement>(
toggleProps.ref,
toggleElementRef
) as RefObject<HTMLElement>,
}}
>
{menuToggleElement}
</MenuToggleProvider>
)}
</MenuPopout>
);
} |
Recipes
Menu items as prop
The Single Select Menu can accept an array of menu item data as a prop ([{ id, onClick, children }]) to render a simple, customizable list of actions.
import { SingleSelectMenu } from '@sproutsocial/racine'() => {const items = TEST_BOOKS.map((book) => ({id: book.id,children: book.title}));return (<Box display="flex" justifyContent="center" alignItems="center" height="100%"><SingleSelectMenumenuToggleElement={<MenuToggleButton>Select something</MenuToggleButton>}menuItems={items}/></Box>);}
Composable Single Select Menu
For more customization and control, the Single Select Menu can also be composed using menu primitives. This approach allows you to define custom layouts, add icons, or integrate with other components while keeping the menu behavior consistent.
import { SingleSelectMenu } from '@sproutsocial/racine'() => {return (<Box display="flex" justifyContent="center" alignItems="center" height="100%"><SingleSelectMenuitemToString={(item) => (item ? TEST_BOOKS[item.index].title : "")}menuToggleElement={<MenuToggleButton>Select something</MenuToggleButton>}><MenuContent><MenuGroup id="books">{TEST_BOOKS.map(({ id, title }) => (<MenuItem key={id} id={id}>{title}</MenuItem>))}</MenuGroup></MenuContent></SingleSelectMenu></Box>)}