Contributing to Lumix Pt. 2
Tags: beginners, ui, react, opensource
Published: 2023-11-28 04:53:26

Continuing from my [previous article](https://dev.to/mismathh/contributing-to-lumix-pt1-c0h), I decided to create two more React components for [Lumix](https://github.com/Keerat666/Lumix). Lumix is a React UI library that provides versatile UI elements that can be added to your web development project.

<h2>Issue - Accordion Component</h2>
Another [issue](https://github.com/Keerat666/Lumix/issues/43) 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.

<h2>Working on Accordion Component</h2>
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.  

```JavaScript
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:

![Accordion component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/67ar0nad6xmuewtsa1df.JPG)

My PR for this issue can be found [here](https://github.com/Keerat666/Lumix/pull/69).

<h2>Issue - Tabs Component</h2>
Another [issue](https://github.com/Keerat666/Lumix/issues/42) 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.

<h2>Working on Tabs Component</h2>
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:
![Tabs component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7y1nosbuljnpm5oobbhj.JPG)

My PR can be found [here](https://github.com/Keerat666/Lumix/pull/70).

<h2>Learning Outcomes with Lumix</h2>
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!