Foldable Component

The <Foldable> component provides a collapsible container with an animated transition between open and closed states. It features a customizable header with title, description, optional icon or image, and a rotating arrow indicator.

Basic Usage

The Foldable component can be used in both controlled and uncontrolled modes, and offers various customization options for the header and content.

Basic

import { Foldable, Text } from "react-better-html";

function App() {
   return (
      <Foldable
         title="Section Title"
      >
         <Text>
            This content will be shown or hidden when the header is clicked.
            The component animates smoothly between states.
         </Text>
      </Foldable>
   );
}

With Description

import { Foldable, Text } from "react-better-html";

function App() {
   return (
      <Foldable
         title="Section Title"
         description="A brief description of this section's content"
      >
         <Text>
            This content will be shown or hidden when the header is clicked.
            The component animates smoothly between states.
         </Text>
      </Foldable>
   );
}

With Icon

import { Foldable, Text } from "react-better-html";

function App() {
   return (
      <Foldable
         title="Section Title"
         description="A brief description of this section's content"
         icon="magnifyingGlass"
      >
         <Text>
            This content will be shown or hidden when the header is clicked.
            The component animates smoothly between states.
         </Text>
      </Foldable>
   );
}

With Image

import { Foldable, Text } from "react-better-html";

function App() {
   return (
      <Foldable
         title="Section Title"
         description="A brief description of this section's content"
         image="logo"
      >
         <Text>
            This content will be shown or hidden when the header is clicked.
            The component animates smoothly between states.
         </Text>
      </Foldable>
   );
}

Controlled Mode

You can control the Foldable component's open/closed state externally:

import { Foldable, Button, Div, Text, useBooleanState } from "react-better-html";

function App() {
   const [isOpen, setIsOpen] = useBooleanState();

   return (
      <Div.column gap={16}>
         <Button text={isOpen ? "Close Section" : "Open Section"} onClick={setIsOpen.toggle} />

         <Foldable
            title="Controlled Foldable"
            isOpen={isOpen}
            onOpenChange={setIsOpen.toggle}
         >
            <Text>This foldable's state is controlled by the button above.</Text>
         </Foldable>
      </Div.column>
   );
}

Ref API

The foldable can be controlled using a ref with the following methods:

type FoldableRef = {
   isOpen: boolean;
   open: () => void;
   close: () => void;
   toggle: () => void;
};

• open() - opens the foldable
• close() - closes the foldable
• isOpen - a boolean indicating whether the foldable is currently opened or not
• toggle() - toggles the foldable's open/closed state

Custom Header

You can fully customize the header using the renderHeader prop:

import { Foldable, Div, Text, Icon, useTheme } from "react-better-html";

function App() {
   const theme = useTheme();

   return (
      <Foldable
         renderHeader={(isOpen, toggleOpen) => (
            <Div.row
               alignItems="center"
               justifyContent="space-between"
               backgroundColor={isOpen ? theme.colors.primary : theme.colors.backgroundContent}
               padding={theme.styles.space}
               cursor="pointer"
               onClick={toggleOpen}
            >
               <Text fontWeight={700}>Custom Header Design</Text>

               <Icon
                  name="chevronDown"
                  transform={`rotate(${isOpen ? 180 : 0}deg)`}
                  transition={theme.styles.transition}
               />
            </Div.row>
         )}
      >
         <Text>This foldable has a completely custom header.</Text>
      </Foldable>
   );
}

Subcomponents

A number of components in the library have a subcomponent feature witch is like a preset of the same component that is frequently used.

Foldable.box

This component renders a foldable with predefined styles like the <Div.box> component.

<Foldable.box title="Box Styled Foldable" description="This subcomponent has a predefined style">
   <Text>Content goes here</Text>
</Foldable.box>