Now, this could be considered a piece of functionality, but I consider it to be styling.

Let's add this in. Pull up your terminal, and inside of our directory type npm install --save react-animate-height, and then wait for that to install. While that's installing, let's look at the documentation here where it says "Quick start".

Now to use it all we have to do is basically type in this code block right here.

<AnimateHeight
    duration={ 500 }
    height={ height } // see props documentation below
>
    <h1>Your content goes here</h1>
    <p>Put as many React or HTML components here.</p>
</AnimateHeight>

Once this is done downloading, what I want to do is first type in git status and you'll see that it modified our package-lock.json and package.json files. Now type git diff and it will show you a more detailed view of the changes, you can see the differences.

Now, to get this working, we just have to do what they did and we want to do it on the results page because when we go there, we want to hover on the results and have them open up to the links. Now if we inspect the design, we can see the styles that they have selected.

We want to have these open up and have animations, and this can be done pretty easily using a couple lines of code and javascript event handlers that are already built in, plus the React Animate Height we just downloaded.

Let's get started by wrapping the result-post__links up in the Animate tags that we get from the web, but make sure that you import it up at the top of the file. import AnimateHeight from 'react-animate-height';

post.js

<AnimateHeight
    duration={500}
    height={this.state.height}
>
    <div className="result-post__links">
        {this.renderLinks()}
    </div>
</AnimateHeight>

We're passing in these props, but to get the height to be what we want it to be, we have to provide a default height value in our state, inside of a constructor.

post.js

constructor(props) {
    super(props)

    this.state = {
        height: 0;
    }
}

Now, we need to set up the title as well, because the title itself is a link to the video. Let's build it out.

post.js

<div className="result-post__title">
    <a href={this.props.url_for_post}>{this.props.title}</a>
</div>

That should work, so let's test it out. Let's search Rails.

You can see our links here, let's click on one.

You can see that it takes us to the page, just like we want. Now we need to set up our links so that they'll appear when we hover the results. What we want to do is basically change this height when we hover over this a tag.

Let's put this on a new line and give it some more props. In order to do this, I looked online and I found a stackoverflow post talking about the onMouseEnter event. (link below)

post.js

<div className="result-post__title">
    <a href={this.props.url_for_post}
        onMouseEnter={() => this.setState({ height: 70 })}
        onMouseLeave={() => this.setState({ height: 0 })}
    >
    {this.props.title}</a>
</div>

We're telling it to adjust the height when the mouse is over the title, and to set the height to 0 when the mouse leaves the area. If you want to see the actual react animate height code, in Visual Studio Code you can press cmd+left-click and it will take you to the code.

As you can see, they're all built inside of interfaces. Interfaces are a little confusing if you haven't dealt with them before. I've dealt with interfaces specifically in C++, This is just basically just a place where you declare all your variables in before you use them in the actual file. S

A lot of languages have removed that because it's pretty unnecessary sometimes except for larger scale operations that are trying to develop libraries like this.

It should be working, so let's go to our application and see if we have that functionality.

We have our titles, and when we hover over them, we have a really clean smooth animation. We could have done this with CSS, but that would have been more work. It's already very clean and it looks very good. So that finishes it for this guide. I guess this could be considered functionality.

Now we're officially done with the functionality. What we'll do in the next guide is get into the actual styles using CSS grid, and we'll start with the homepage and we'll start aligning the items. Then we will hop into the recent posts later on and get this all style and then we will style all of the other pages.

Pretty simple stuff. Let's go ahead and commit our code and then get into the styles and get those done as quick as possible.

git status
git add .
git commit -m "added react-animate-height npm package and used it to add hover animations to the post links"
git push origin master

Let's go ahead and start with styles in the next guide.

Resources

Code at this stage

React Animate Height

Accessing Hover in React.js