DEV Community: Ramil

Animate height: auto with removing content from DOM in React.js

Ramil — Tue, 16 Apr 2024 17:47:45 +0000

During a recent project, I encountered a seemingly straightforward task: animating content expansion upon clicking a title.

However, implementing this in React posed challenges, especially since the component had to accommodate dynamic content with unknown heights.

Problem №1

Unfortunately, we still can't just write something like



.content {
  height: 0;
  transition: height .3s ease;
}

.content.expanded {
  height: auto;
}

because it won't work.

Of course, we can implement this using JavaScript, but I decided not to retreat and still try to find ways to use only CSS for animation.

And I was lucky, because I was found examples of animation implementation using only css grid. Here is one of these wonderful articles.

Solution №1

Great, we have an example of animation, so all we have to do is implement it in react.
Simple implementation will look something like this:



.content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s ease-out;
}

.content.expanded {
  grid-template-rows: 1fr;
}

.inner {
  overflow: hidden;
}



const Expandable = ({
  children,
  defaultExpaded = false,
  title,
}: {
  children: ReactNode;
  title: ReactNode;
  defaultExpaded?: boolean;
}) => {
  const [expanded, setExpanded] = useState(defaultExpaded);

  return (
    <>
      <button onClick={() => setExpanded(!expanded)}>{title}</button>
      <div className={`content ${expanded ? 'expanded' : ''}`}>
        <div className="inner">{children}</div>
      </div>
    </>
  );
};

function App() {
  return (
    <Expandable title="Logo" defaultExpaded>
      <img src={reactLogo} className="logo react" alt="React logo" />
    </Expandable>
  );
}

So everything works as expected so we can submit the task for code review, drink a cup of tea and take on a new task.

After some time during the code review, I received a question:

Can we make it so that if the content is collapsed, then we do not render the DOM that is hidden?

Good question, so let's think about it

Problem №2

It would seem that we could simply add a check and render children only if expanded === true:



<>
  <button onClick={() => setExpanded(!expanded)}>{title}</button>
  <div className={`content ${expanded ? 'expanded' : ''}`}>
    {/* Add check for expanded */}
    <div className="inner">{expanded && children}</div>
  </div>
</>

but this won't work, because whenexpanded === false we will not have any content, which means that the animation will not happen.

Solution №2

So, we know that the problem is that during animation we have no content. It means we need to come up with something that will hide the content after our animation ends.

Fortunately, we have an event that will be called exactly after the animation ends. Because we use css tranision property for animation, we can simply add an onTransitionEnd event handler to the animated div and we alsow will need an additional variable that will control the visibility.

So let's put this functionality into a custom hook for not to write logic inside the component:



const useExpand = (defaultExpanded: boolean) => {
  const [visible, setVisible] = useState(defaultExpanded);
  const [expanded, setExpanded] = useState(defaultExpanded);

  const toggle = useCallback(() => {
    if (!expanded) {
      setVisible(true);
      setExpanded(true);
    } else {
      setExpanded(false);
    }
  }, [visible, expanded]);

  const onToggled = useCallback(() => {
    if (visible && !expanded) {
      setVisible(false);
    }
  }, [expanded, visible]);

  return { toggle, expanded, visible, onToggled };
};

Let's see on useExpand hook closely.
We declared an additional variable visible, which will be responsible for whether to delete the DOM or not. To control toggle we will use the toggle function, and the animation end event will be handled by the onToggled function.

Now we can use this hook in our Expandable component



const Expandable = ({
  children,
  defaultExpaded = false,
  title,
}: {
  children: ReactNode;
  title: ReactNode;
  defaultExpaded?: boolean;
}) => {
  const content = useExpand(defaultExpaded);

  return (
    <>
      <button onClick={content.toggle}>{title}</button>
      <div
        className={`content ${content.expanded ? 'expanded' : ''}`}
        onTransitionEnd={content.onToggled}
      >
        <div className="inner">{content.visible && children}</div>
      </div>
    </>
  );
};

Note: Because in this example the animation occurs through css transition, we attach the onToggled function to the onTransitionEnd event. If we used css animation the event would be onAnimationEnd.

Here is live example of code

Recap

So, in this article I wanted to show how you can implement height animation and hide content from the DOM when the content is collapsed.
We wrote a hook that can be used in any other component, keeping in mind the necessary markup and handlers for the corresponding events

Special thanks to my colleague Evgeniy for his invaluable contributions to improving readability and code quality

How to autogenerate files for React component from command line

Ramil — Thu, 12 May 2022 20:57:11 +0000

Hello, my name is Ramil and I work as a frontend developer and write code on React for several years. I once read that one of the characteristics of professional programmers is

the ability and desire to automate those processes around that can be automated

And this prompted me to implement the idea that I want to share in this article.

As a rule, when writing components in React, we often need to perform the same repeatable actions. On the one hand, this is good, because in this way a single code style is formed, on the other hand, this means performing monotonous and routine work, which we would like to avoid.

Awareness of problem

Not so long ago, when working on one of my project, I ran into a situation familiar to everyone. In order to create a next component, I need to make few steps:

create a folder for all files of the component, so that all files related to the component are nearby, like components/[ComponentName]
create a file with code of component itself, like [ComponentName].tsx
create a file for styles (I usually use css-modules), like [ComponentName].module.css
create a file for types (I prefer to keep types separate from component code), like [ComponentName].types.ts
create a file index.ts for export all necessary data (barrel file)

Above, I described only the operations for creating the necessary files. But some files are related to each other, they are imported into each other and use the name of the component within themselves.
For example, styles and type files are imported into the main component file, and the name of the interface for describing component props is formed from the name of the component.

So after googling and finding great article from Mike Theodorou I decided to supplement a bit his examples and share it with you.

Script requirements

So, the main requirements for the script to automatically generate a folder with files for the React component were:

avoid installing new packages and dependencies
the script should be simple and easily configurable
the ability to dynamically set the name for the component

Beginning of work

Main configuration

Let's start from file with constants:
DEFAULT_COMPONENT_BASE_PATH - this is the path to the folder where components will be created by default, if no other path was specified
FILES_DATA - an array of objects, in fact our main config, where we indicate which files we need and which template to use for this. In this case we want to create 4 files.

Templates

Since we've touched on the topic of templates, let's see what a template file looks like. There are no complications here, we just export functions that substitute variables using template strings

Working with the command line

Further, in order for our script to request information from the user, we can use the built-in Node.js module called readline.
To use it, in our case, we need 3 steps:

create an instance using a method createInterface
read data from the command line using instance method question
close "connection" to command line using instance method close()

Following the single responsibility principle, I decided to combine all the work with the readline module into a Readline wrapper class, where I added public methods to call the question and close methods.

Helper functions

In order to make the code of our main script as clean as possible, I decided to decompose the code and move some functions outside of it.

Here we got:

functions for get information from the command line about the name and path of the component, and processing the entered values

From the function for getting the name of the component, I return the name of the component with a capital letter, because React component names always starts with a capital letter and I'm too lazy and don't want to hold down Shift every time I type component name in command line 😅 so I did this modification for myself.
From the function for getting the path for the folder with the component, I return the default path if nothing was entered on the command line.

function to create files based on our config based on FILES_DATA

Script entry point

And finally, we need an entry point. This is a main script file in which we will combine all our logic and the same script that we will run to autogenerate files for React component from command line.
I didn't add a large number of checks and other things. Here is only a basic check to see if such a component already exists, and if not, then create a directory and generate component files.

Run the script

That's all, now it remains to run the script. My folder with this script is in the root of the project with the following structure:

To start, I only need to run the generate-component.js script file using Node.js. In my case it will be like this:

node ./.scripts/generate-component/generate-component.js

If desired, the script call can be placed in a package.json file in scripts section:

{
  "scripts": {
    "generate-component": "node ./.scripts/generate-component/generate-component.js",
  }
}

Final gist with all files you can find here

Conclusion

It was one of the options for solving this problem. Of course, there are already ready-made npm packages for this, but I wanted to try to write something of my own and simple, and I think that this was quite successful. Finally, I would like to note the idea with which this post began:

if possible, try to automate routine work. This will either save you time in the future, or at least give you a good programming experience.

How to create autocomplete with react-autocomplete-pure

Ramil — Tue, 01 Feb 2022 16:23:17 +0000

Autocomplete in input fields is a very useful feature that allows customers to improve their UX when using your site.
One of the features of autocomplete is that we help the user to enter some data, not forcing him to enter the entire text, but by providing a ready-made set of options. Thanks to this approach, the user can choose exactly from those options that the application knows how to work with, saving us from unnecessary checks and errors.

One of the first ready-made solutions that come to mind are libraries such as react-autocomplete and react-autosuggest. These are great libraries that do exactly what they are supposed to do: when you enter a value in the input field, they display a dropdown with possible options for substitution. Unfortunately, these libraries are no longer actively supported by their maintainers (react-autosuggest is looking for the main maintainer, and react-autocomplete is in the archive).

In this regard, I decided to write (yes, this is sooo classic 😄) my vision of a component for autocompletion.

Let me introduce react-autocomplete-pure - TypeScript friendly react component for autocomplete.
The main features that I wanted to put into this component is that I developed it with the ability to have the finest possible configuration of everything that may be required when developing specifically for your project.

Below is the main key features which react-autocomplete-pure gives to you:

the maximum setting for displaying all parts of the component (input field, list, managing the view of the list container and its composition);
written in TypeScript, which makes it possible to take full advantage of typings with support for generics;
keyboard events support;
a11y support;

react-autocomplete-pure has almost no state of its own, which means it needs to be managed in the parent component. This keeps the component as dummy as possible, which allows us to keep all the logic in one place and will only manage the display based on passed props.

Example of using

Suppose the user wants to enter in our input field the name of a movie, from the imdb's top 100 movies. Well, there is nothing easier! Let's add a field for autocompletion and show the user the available movie options as they type.

First, let's install react-autocomplete-pure to our project
using npm

npm i react-autocomplete-pure

or via yarn

yarn add react-autocomplete-pure

NOTE: Before continuing, I would like to clarify that the code below is written in TypeScript so that we have type support and better DX when working with our IDE. Optionally, types can be omitted if you want to write in Vanilla JS.

We know that movies will come to us as an array of objects from our backend (example). Each object in this array is a movie with its title and release year.

type Film = { title: string; year: number };
const topFilms: Film[] = [
  { title: "The Shawshank Redemption", year: 1994 },
  { title: "The Godfather", year: 1972 },
  /*...and more...*/
];

So, as we know incoming data format, now it's time to add the component to the project:

import { AutocompletePure } from "react-autocomplete-pure";
import { Film } from './types';

export function App() {
  return (
    <div>
      <h1>My awesome app with autocomplete</h1>
      <AutocompletePure<Film>  /*what about required props?*/>
    </div>
  );
}

We've added a component to the project, but we haven't added any props to it yet. Let's fix this.
According to the available props in documentation we have some required props.
Don't be afraid that there are so many of them, they are all intuitive and it is thanks to them that you can fully control the behavior of the component 😄. Let's update our code.

NOTE: fetchFilms function is taken from here.

import { useCallback, useEffect, useRef, useState } from "react";
import { AutocompletePure, RenderItem } from "react-autocomplete-pure";
import { fetchFilms } from "./mock";
import { Film } from "./types";

// let's add some style if item is highlighted
const renderItem: RenderItem<Film> = (item, { isHighlighted }) => (
  <span style={{ fontWeight: isHighlighted ? 700 : 400 }}>{item.title}</span>
);

// Needs to get new value when using keyboard events
const getSuggestionValue = (item: Film) => item.title;

export function App() {
  const [isOpen, setIsOpen] = useState<boolean>(false);
  const [suggestions, setSuggestions] = useState<Film[]>([]);
  const [value, setValue] = useState<string>("");

  // When input changes then save value
  // If change reason is type on input then get new items, save them and close dropdown if no new items fetched
  // If change reason is enter keydown then simple close dropdown
  const handleChange: AutocompletePureProps<Film>["onChange"] = useCallback(
    async (_event, { value, reason }) => {
      setValue(value);
      if (reason === "INPUT") {
        const newFilms = await fetchFilms(value);
        setSuggestions(newFilms);
        setIsOpen(Boolean(newFilms.length));
      } else if (reason === "ENTER") {
        setIsOpen(false);
      }
    },
    []
  );

  // When item selected then save it and close dropdown
  const handleSelect: AutocompletePureProps<Film>["onSelect"] = useCallback(
    (_event, { item }) => {
      const value = getSuggestionValue(item);
      setValue(value);
      setIsOpen(false);
    },
    []
  );

  return (
    <div>
      <h1>My awesome app with autocomplete</h1>
      <AutocompletePure<Film>
        open={isOpen}
        value={value}
        items={suggestions}
        onChange={handleChange}
        onSelect={handleSelect}
      />
    </div>
  );
}

Our component is almost ready to use, except that we currently do not hide the list if we click somewhere outside the component. This is easy to fix, the component can calls the onClickOutside callback, in which we can implement the logic for hiding the list.

/* ...same as before... */
export function App() {
  /* ...same as before... */
  const handleClickOutside = useCallback((_event: Event) => {
    setIsOpen(false);
  }, []);

  /* ...same as before... */
  return (
    <AutocompletePure<Film>
      open={isOpen}
      value={value}
      items={suggestions}
      onChange={handleChange}
      onSelect={handleSelect}
      onClickOutside={handleClickOutside}
    />
  );
  /* ...same as before... */
}

That's all, now the component can be fully used! Congratulations, you did it! You can play more in sandbox:

If you want to see more features (like custom renderers for component's parts) of using component you can watch them in repository in site folder