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.
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.
Sets whether or not element will close when the user clicks outside of it
optional ref to pass down to Details component
Values returned by the useDetails hook
Whether or not Details is currently open
Used to manually change the open state of the Details component
Contains 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.