UnpopularAccordion Documentation

The UnpopularAccordion component allows you to create expandable and collapsible sections. Below are examples of how to use the component in different scenarios.

Props

The following props are available:

Prop	Description
`sections`	An array of objects, each containing a `header` and `content`.
`accordionStyle`	An object containing styles for the accordion.
`collapsedIcon`	The icon to display when the section is collapsed.
`contentStyle`	An object containing styles for the content.
`expandedIcon`	The icon to display when the section is expanded.
`sectionStyle`	An object containing styles for the section.
`transitionDuration`	The duration of the transition when the section is expanded or collapsed.
`headerStyle`	An object containing styles for the header.

Basic Usage

To create a basic accordion, you need to provide the sections prop. The sections prop is an array of objects, each containing a header and content.

const sections = [
  { header: "Section 1", content: <p>This is the content of section 1.</p> },
  { header: "Section 2", content: <p>This is the content of section 2.</p> },
  { header: "Section 3", content: <p>This is the content of section 3.</p> },
];

// Usage
<UnpopularAccordion sections={sections} />

Section 1▼

Section 2▼

Section 3▼

Custom Styles and Icons

You can apply custom styles to the accordion, sections, headers, and content by using the accordionStyle, sectionStyle, headerStyle, and contentStyle props. You can also provide custom icons for expanded and collapsed states.

const accordionStyle = {
  border: '1px solid #ddd',
  borderRadius: '8px',
};

const sectionStyle = {
  marginBottom: '10px',
};

const headerStyle = {
  backgroundColor: '#007bff',
  color: '#fff',
  padding: '20px',
  fontSize: '18px',
};

const contentStyle = {
  padding: '20px',
  backgroundColor: '#f9f9f9',
};

const expandedIcon = <span>▲</span>;
const collapsedIcon = <span>▼</span>;

// Usage
<UnpopularAccordion
  sections={sections}
  accordionStyle={accordionStyle}
  sectionStyle={sectionStyle}
  headerStyle={headerStyle}
  contentStyle={contentStyle}
  expandedIcon={expandedIcon}
  collapsedIcon={collapsedIcon}
/>

Additional use cases

You can add additional features to the accordion by using the expandedIcon, collapsedIcon, and transitionDuration props.

const expandedIcon = <span>▲</span>;
const collapsedIcon = <span>▼</span>;
const transitionDuration = 300; // in milliseconds

// Usage
<UnpopularAccordion
  sections={sections}
  expandedIcon={expandedIcon}
  collapsedIcon={collapsedIcon}
  transitionDuration={transitionDuration}
/>

Section 1▼

Section 2▼

Section 3▼