Generic way to show/hide arbitrary content on the page using react-aria

[smashercosmo]

There are many common components that allows for showing/hiding some content, like tabs, accordions, modal dialogs and so on. But sometimes you just need something simpler, closer to html <details> tag. So, I'm wondering what would be the best way to implement something like that using the existing react-area hooks?

[reidbarber]

I don't think React Aria has exactly what you need at the moment, but I would recommend taking a look at implementing something similar to useAccordionItem, and removing collection-specific implementation details:

react-spectrum/packages/@react-aria/accordion/src/useAccordion.ts

Lines 36 to 65 in 0571f1c

	export function useAccordionItem<T>(props: AccordionItemAriaProps<T>, state: TreeState<T>, ref: RefObject<HTMLButtonElement>): AccordionItemAria {
	let {item} = props;
	let buttonId = useId();
	let regionId = useId();
	let isDisabled = state.disabledKeys.has(item.key);
	let {itemProps} = useSelectableItem({
	selectionManager: state.selectionManager,
	key: item.key,
	ref
	});
	let {buttonProps} = useButton(mergeProps(itemProps as any, {
	id: buttonId,
	elementType: 'button',
	isDisabled,
	onPress: () => state.toggleKey(item.key)
	}), ref);
	let isExpanded = state.expandedKeys.has(item.key);
	return {
	buttonProps: {
	...buttonProps,
	'aria-expanded': isExpanded,
	'aria-controls': isExpanded ? regionId : undefined
	},
	regionProps: {
	id: regionId,
	role: 'region',
	'aria-labelledby': buttonId
	}
	};
	}

i.e. change state from TreeState to something with just isExpanded: boolean, isDisabled: boolean. Everything currently returned should probably work for your use case.

Maybe someone else can chime in if they're aware of an easier solution.

[smashercosmo]

Yeah, this is exactly what I was thinking about)

[reidbarber]

Sounds good! And for a state hook, you could copy useOverlayTriggerState as a starting point:

react-spectrum/packages/@react-stately/overlays/src/useOverlayTriggerState.ts

Lines 16 to 46 in 0571f1c

	export interface OverlayTriggerState {
	/** Whether the overlay is currently open. */
	readonly isOpen: boolean,
	/** Opens the overlay. */
	open(): void,
	/** Closes the overlay. */
	close(): void,
	/** Toggles the overlay's visibility. */
	toggle(): void
	}
	/**
	* Manages state for an overlay trigger. Tracks whether the overlay is open, and provides
	* methods to toggle this state.
	*/
	export function useOverlayTriggerState(props: OverlayTriggerProps): OverlayTriggerState {
	let [isOpen, setOpen] = useControlledState(props.isOpen, props.defaultOpen || false, props.onOpenChange);
	return {
	isOpen,
	open() {
	setOpen(true);
	},
	close() {
	setOpen(false);
	},
	toggle() {
	setOpen(!isOpen);
	}
	};
	}

[reidbarber]

Although, it might be better just to use our existing Accordion and contribute anything you find that is missing. Read up on benefits of the accordion pattern vs others: https://www.hassellinclusion.com/blog/accessible-accordions-part-2-using-details-summary/

[smashercosmo]

But, I'm wondering would react-spectrum team consider implementing some genetic hide/show content hook?

[snowystinger]

Can you explain your use case a bit more? or apprehension for using an Accordion with a single item? I think the Accordion approach is probably what would be used, as @reidbarber pointed it has some accessibility advantages.