Contributing to Lumix Pt. 2

Continuing from my previous article, I decided to create two more React components for Lumix. Lumix is a React UI library that provides versatile UI elements that can be added to your web development project.

Issue - Accordion Component

Another issue that I picked up was to create a reusable component that can open single or multiple accordions and display their content. An accordion in regards to UI web design, is a vertically stacked list of headers that can be triggered to reveal/hide content associated with it.

Working on Accordion Component

The concept of showing/hiding a div for the header content was fairly simple in implementing, as my initial plan was to use a useState variable to act as a toggle for the Accordion component, but it got a little tricky dealing with multiple accordions. When there's multiple accordions, my initial implementation either opened or closed up all of the accordions, which was not the goal here as I needed to provide the functionality to open an accordion without affecting the others.

My fix to this was to create a useState variable to hold all of the index values of the opened accordions and to have a function like handleClick() to add or remove an accordion index from the useState variable array each time an accordion header is clicked on.

const [openIndexes, setOpenIndexes] = useState([]);

  const handleClick = (index) => {
    if (openIndexes.includes(index)) {
      setOpenIndexes(openIndexes.filter((i) => i !== index));
    } else {
      setOpenIndexes([...openIndexes, index]);
    }
  };

  return (
    <div
      className="wrapper"
      style={{
        display: "flex",
        justifyContent: `${verticalAlignment}`,
      }}
    >
      <div className="accordion">
        {items.map((item, index) => (
          <div
            className="section"
            key={index}
            style={{
              marginBottom: "5px",
            }}
          >
            <div
              className="title"
              onClick={() => handleClick(index)}
              style={{
                display: "flex",
                justifyContent: "space-between",
                alignItems: "center",
                padding: "10px 20px",
                backgroundColor: `${titleColor}`,
                fontSize: `${titleSize}px`,
                width: `${width}px`,
                border: openIndexes.includes(index) ? "1px solid black" : "",
              }}
            >
              {item.title}
              <span>{openIndexes.includes(index) ? "-" : "+"}</span>
            </div>

This is how the Accordion component looks like with default prop values:

My PR for this issue can be found here.

Issue - Tabs Component

Another issue that I worked on was to create a reusable component that is able to render multiple tabs and to display content of an active tab.

Working on Tabs Component

Working on this issue was a bit easier than the Accordion issue, as my initial implementation for that can work here (have a useState variable act like a toggle to only display a certain tab). Additionally, to better signify that a tab is interactive and can be clicked on, I used the cursor: 'pointer' style property to display a pointer cursor whenever the user points over a tab.

This is how the Tabs component looks like with default prop values:

My PR can be found here.

Learning Outcomes with Lumix

Overall, these issues that I have worked on for the Lumix project enhanced my proficiency in crafting React components with exceptional user interface design. Compared to my contributions in Hacktoberfest23, they weren't necessarily hard to do, but I learned many minor details and concepts that I was able to explore only because I had the freedom to create highly customizable components. Looking forward to contributing to more open-source projects in the future!