How to implement Netflix slider with React and hooks
Something about Netflix UI written in React and animated by CSS.
You probably have seen the Netflix user interface. Most of this interface consists of big sliders with expressive hover effect which is used for displaying movies and related information. Every single element contains a thumbnail of the movie, but when you hover, it will be zoomed and the rest of the elements will translate sideways — that’s how it basically works.
Today I want to show you that there is no magic, and it’s possible to do this in just a few steps.
💡Starting with container
At the beginning, let’s try to write that slider but without any hover or sliding effects. This will be a base for the next steps.
There is nothing complex - it’s just one container with the elements inside.
The CSS is also quite short - container has flex display and all of the items belong to him with constant sizing.
💡Push them to the left side!
The algorithm starts with a simple translation. We have to move all of the elements to the left side of the container. So when we hover the container, all of the elements should move to the left.
There is a piece of code which will do this:
We used here translation value of 25%, I’ll explain this reasoning later in the article.
💡 Hmmm, now to the right!
The next step is very similar to the previous one. Basically, we have to do the same translation but on the other side and… without moving previous elements. It means we have to slide only elements that are after the hovered one.
Below code represents it:
Again, you can see 25%, be patient!
💡 Apply hover effect
Now, we can spread up! The last thing what we need to do is scaling. We have to use another transform which is scale. The value of scaling is 1.5 — this is the reason we used translations with 25%. By using the 1.5 value to scale that element, it will increase the size by 150%, and this 50% is split into the 25% translation on each side. You can change these values of course, just make sure the math works out.
Scaling code:
💡 Show me what you have!
We have the hovering effect, but this slider also shows the content when you click on the bottom arrow. There is nothing special besides the background behind, it has 30% of the left (dark) side and 70% of preview/picture. Furthermore, between these two elements is the gradient to make the left side edge smoother.
How to implement that background? Simply, :before, :before…
Now all of the content must be on the position: absolute (relative to the container) because it needs to cover that background.
💡 Where the React comes
Time to connect this with React. Let’s try also to extend this idea with sliding functionality and expanding as it is on the Netflix website. There is available a full React code of this slider, but I want to explain the most important things to achieve final effect so let’s focus on these two files:
Share logic by using context API
As you can see, in both files I used context API. This is because I want to share event handlers between the parent and the children components. Obviously, you could do the same with eg. render-props, but with the context API, I don’t have to remember about passing down handlers to the items — I can use item components without thinking how it has been done inside.
Use hooks to doing some calculations
To accomplish sliding functionality I wrote two hooks. First one is for reading the width (useSizeElement) of the container and the second one to implement the sliding logic itself (useSliding). I’m attaching both code samples below:
How do they work? I used refs for getting information about sizes (width) and I shared functions for handling previous and next clicks.
Few words…
Below, you can see the final result and links to the repository. Of course, this is only short text that shows how you can achieve the major functionality such as hovering or sliding. There is no completion slider library - few edge-cases needs to implement too!
GitHub: https://github.com/andrzejewsky/netflix-slider
Cheers!
PS. React hooks are great, but it needs some time for adoption and to develop best practices.
