Accordion

The Accordion component allows users to expand and collapse content sections.

It provides:

• Smooth animation for expand/collapse
• Customizable icons and header layouts & content

Usage

Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum

function AccordionUsage() {
  return (
    <View>
      <Accordion
        title="Hello from Accordion"
        description="Hello from Blossom UI"
        content={'Lorem Ipsum '.repeat(20)}
      />
    </View>
  )
}

Custom

You are certainly not spammed!!

function AccordionCustom() {
  const ChevronView = useCallback(
    (isOpen: boolean) => <Text typography="h3">{isOpen ? '🙃' : '🙂'}</Text>,
    [],
  )

  return (
    <View>
      <Accordion
        title={
          <Text status="success" typography="h6">
            Hello
          </Text>
        }
        description={
          <Text status="accent" typography="c2">
            Click to know more
          </Text>
        }
        left={<Icon name="home" />}
        chevron={ChevronView}>
        <Text status="info">You are certainly not spammed!!</Text>
      </Accordion>
    </View>
  )
}

Props

Prop	Data Type	Default Value	Description
Extends	--	--	--
isOpen	boolean	--	Set it to true to open the accordion
title	ReactNode	--	Title of the accordion
description	ReactNode	--	description of the accordion below title
content	string	--	Content of the accordion shown when expanded
children	ReactNode	--	Render custom view inside the accordion instead of the content string
left	ReactNode	--	Render any icon/JSX on left of the title
right	ReactNode	--	Render any icon/JSX on right of the title
chevron	(isOpen: boolean) => ReactNode	--	Custom chevron icon to show
containerStyle	StyleProp<ViewStyle>	--	Container style for the accordion
headerStyle	StyleProp<ViewStyle>	--	Accordion header style for title & description
onPress	() => void	--	On press callback on the title section
transitionDuration	number	300	Set the animation transition duration for the accordion