Skip to content

Details & useDetails hook

Details is a styled details element for use with the useDetails hook. The useDetails hook returns the open state, a setOpen function to manually change the open state, and getDetailsProps which must be spread onto your Details element in order for Details to get receive the proper behaviors provided by the hook. See Kent Dodd's article on this pattern here.

The useDetails hook also takes a few configuration options as parameters which are noted in the table below.

You must use a summary element as your Details trigger button. To style your summary element like a Button, you can use the as prop (see example below).

It's also possible to use the useDetails hook with components other than the Primer Details, such as a custom Details or Modal wrapper in your consuming application. All that matters is that the outer element is a details and it contains a summary for the button that opens and closes the component, and that getDetailsProps is properly spread onto the component rendering your details element.

HelloThis is some content

You can use the open state returned from the hook to conditionally render content:

closeThis is some content

You can also manually show/hide the content using the setOpen function returned from the hook. This can be useful if you have action items in the content of the component such as confirmation buttons:

Delete itemAre you sure?

In previous versions of Primer React Components, we allowed users to pass in a custom onToggle function. You can do this now by overriding the onToggle function returned in getDetailsProps. Please note that in most cases, you'll want the hook's handling of onToggle to be run as well, so that the internal state is properly updated. To do this, manually call the onToggle handler returned from useDetails before executing your custom onToggle code.

ClosedHello World

Details System props

System props are deprecated in all components except Box. Please use the sx prop instead.

Details components get COMMON system props. Read our System Props doc page for a full list of available props.

useDetails hook configuration options

NameTypeDefaultDescription
defaultOpenBooleanSets the initial open/closed state
closeOnOutsideClickBooleanfalseSets whether or not element will close when the user clicks outside of it
refReact refoptional ref to pass down to Details component

Values returned by the useDetails hook

NameTypeDescription
openstringWhether or not Details is currently open
setOpenfunctionUsed to manually change the open state of the Details component
getDetailsPropsObjectContains an onToggle function, the ref to pass down to Details and the open attribute. In most cases, you won't need to interact with any of these values directly, but if you'd like to override any of these yourself you may.
Edit this page on GitHub
2 contributorsVanAndersonemplums
Last edited by VanAnderson on July 22, 2021