abaabil.details

Details Component

The Details component is used to create expandable sections in your application. It's part of the abaabil.details library.

Installation

npm install abaabil.details

Importing

You can import the Details component from the abaabil.details package:

import Details from 'abaabil.details';

Basic Usage

The Details component can be used in your JSX to create expandable sections. You can customize the component by setting its properties such as summary, icon, openIcon, closeIcon, and more.

<Details summary="Click to expand" icon="info-circle">
  This is the content inside the Details component.
</Details>

Examples

Basic Example

<div className="space-y-4">
  <Details summary="Apple Details Summary Text" icon="apple">
    <div>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </div>
  </Details>
  <Details summary="Banana Details Summary Text" icon="cherry">
    This is the content inside the Details component.
  </Details>
</div>

Custom Icons

You can customize the icons used in the Details component:

<Details 
  summary="Custom Icons Example" 
  icon="info-circle"
  openIcon="chevron-up"
  closeIcon="chevron-down"
>
  This Details component has custom icons.
</Details>

Initially Expanded

You can set the Details component to be initially expanded:

<Details summary="Initially Expanded" expanded={true}>
  This Details component is initially expanded.
</Details>

Properties

Property	Type	Description	Default	Required
summary	ReactNode	Content to display in the summary (header)	-	Yes
children	ReactNode	Content to display when expanded	-	Yes
icon	string	Icon ID to display next to the summary	-	No
openIcon	string	Icon ID to display when open	'chevron-down'	No
closeIcon	string	Icon ID to display when closed	'chevron-up'	No
className	string	Additional CSS classes	-	No
expanded	boolean	Whether initially expanded	false	No

The Details component also supports all other default properties available to the HTML details element.

Accessibility

The Details component is designed with accessibility in mind:

• Uses proper ARIA attributes for the summary and content.
• Supports full keyboard navigation:
  • Enter and Space: Toggle open/close
  • Arrow Up and Left: Close the details
  • Arrow Down and Right: Open the details
• Manages its own open/closed state.
• Properly labels summary and content for screen readers.

Styling

The Details component comes with some default styling, but you can customize its appearance using the className prop and your own CSS.

Notes

• The component uses React hooks internally, so it requires React 16.8+.
• Icons are rendered using a separate Icon component from abaabil.temp.icon. Ensure this dependency is available in your project.

For more information or to report issues, please visit the abaabil.details GitHub repository.