React - create simple animated expander

Hi there! 👋 😊

Today, I was thinking about creating an animated expander in React and I came up with the following solution. 🔽

Before we start, I would highly recommend you to check out runnable examples for the solution on our website:
How to create simple animated expander in React

Effect of this short post:

In the example below, I've created a simple expander that displays Fruits 🍉 and Vegetables 🍅 lists on click event. I've used a modern approach that involves the use of functional components and React hooks. In this case useState hook stores the state of my expander. 🔺🔻

Practical example:

import React from 'react';

const expanderStyle = {
    margin: '6px 0',
    padding: '2px',
    border: '1px solid #85C1E9'
};

const headerStyle = {
    display: 'flex',
    cursor: 'pointer'
};

const titleStyle = {
    padding: '3px',
    flex: 'none'
};

const spacerStyle = {
    flex: '1'
};

const iconStyle = {
    padding: '3px',
    flex: 'none'
};

const contentStyle = {
    overflow: 'hidden',
    transition: 'all 0.3s'
};

const contentExpandedStyle = {
    ...contentStyle,
    padding: '4px 0',
    border: '1px solid #85C1E9',
    height: 'auto',
    filter: 'opacity(1)'
};

const contentCollapsedStyle = {
    ...contentStyle,
    padding: '0 0',
    border: '1px solid transparent',
    height: '0',
    filter: 'opacity(0)'
};

const Expander = ({title, children}) => {
    const [expanded, setExpanded] = React.useState(false);
    const handleHeaderClick = () => {
        setExpanded(expanded => !expanded);
    };
    return (
      <div style={expanderStyle}>
        <div style={headerStyle} onClick={handleHeaderClick}>
          <div style={titleStyle}>{title}</div>
          <div style={spacerStyle} />
          <div style={iconStyle}>{expanded ? '🔺' : '🔻'}</div>
        </div>
        <div style={expanded ? contentExpandedStyle : contentCollapsedStyle}>
          {children}
        </div>
      </div>
    );
};

// Usage example:

const App = () => {
  return (
    <div style={{height: '260px'}}>
      <Expander title="🍏🍌🍊 Fruits">
        <ul>
          <li>🍏 Apple</li>
          <li>🍌 Banana</li>
          <li>🍊 Orange</li>
        </ul>
      </Expander>
      <Expander title="🥕🥒🍅 Vegetables">
        <ul>
          <li>🥕 Carrot</li>
          <li>🥒 Cucumber</li>
          <li>🍅 Tomato</li>
        </ul>
      </Expander>
    </div >
  );
};

export default App;

You can run this example here

Let me know if you like it or not in the comment section! 😊

---

Write to us!

If you have any problem to solve or questions that no one can answer related to a React or JavaScript topic, or you're looking for a mentoring write to us on dirask.com -> Questions

Comments

[Jonah Meijers]

Did you know that you can make an expander using native HTML elements? With <details> and <summary> you don’t need any JavaScript to create the same result as above. With CSS you can style all parts of the details element, including the little dropdown arrow.

It’s sadly not animatable as the example you’re displaying, but it does alleviate a lot of unnecessary JavaScript, and it’s semantically correct(!!!) 😁

Here’s some more information about it: developer.mozilla.org/en-US/docs/W...

[Dirask-React]

Thank you for the tips! 😊🔥