Use details component to reveal content after clicking a button.
  • Alpha
  • Not reviewed for accessibility

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.

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.

You can use the open state returned from the hook to conditionally render 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:

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.




useDetails hook configuration options

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

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.