@gluestack-ui/accordion
TypeScript icon, indicating that this package has built-in type declarations

1.0.7 • Public • Published

@gluestack-ui/accordion

The Accordion component is a versatile and interactive user interface element, designed to efficiently organize and present content in a compact space.

Installation

To install the component, run the following command in your terminal. This will add the component to your project's dependencies and allow you to use it in your project.

npx install @gluestack-ui/accordion

Usage

// import the styles
import {
  Root,
  Item,
  Header,
  Trigger,
  Content,
  Icon,
  TitleText,
  ContentText,
} from '../components/core/accordion/styled-components';

// import the createAccordion function
import { createAccordion } from '@gluestack-ui/accordion';

// Understanding the API
const Accordion = createAccordion({
  Root,
  Item,
  Header,
  Trigger,
  Content,
  Icon,
  TitleText,
  ContentText,
});

// Using the Accordion component
export default () => (
  <Accordion>
    <AccordionItem value="a">
      <AccordionHeader>
        <AccordionTrigger>
          {({ isExpanded }: { isExpanded: boolean }) => {
            return (
              <>
                <AccordionTitleText>
                  How do I place an order?
                </AccordionTitleText>
                {isExpanded ? (
                  // ChevronUpIcon is imported from 'lucide-react-native'
                  <AccordionIcon as={ChevronUpIcon} />
                ) : (
                  // ChevronDownIcon is imported from 'lucide-react-native'
                  <AccordionIcon as={ChevronDownIcon} />
                )}
              </>
            );
          }}
        </AccordionTrigger>
      </AccordionHeader>
      <AccordionContent>
        <AccordionContentText>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit.
        </AccordionContentText>
      </AccordionContent>
    </AccordionItem>
  </Accordion>
);

More guides on how to get started are available here.

Package Sidebar

Install

npm i @gluestack-ui/accordion

Weekly Downloads

11,374

Version

1.0.7

License

none

Unpacked Size

111 kB

Total Files

86

Last publish

Collaborators

  • rajat693
  • sravankumarvelangi
  • vaibhk002
  • daminipandey
  • rayan1810
  • amars29
  • geekgautam
  • gluestackadmin
  • geekashwini
  • vidhi499
  • mayankp06
  • madhavb230100
  • viraj-10
  • rohit_singh
  • meenumakkar
  • surajahmedc