How can we create the sticky sidebar for variable content in react?

Elaleh Aslani — Thu, 22 Oct 2020 17:12:56 +0000

We have a sidebar with variable content which must be sticky in its position, for example at the top and on the right of the main page. But when content changes with the user's selection, the sidebar should scroll with the content.
Oh! I forget to tell you we are using REACT, and we want to manage this situation with the react library.
Now we use react-stickynode from https://github.com/yahoo/react-stickynode.
This library helps us to create a sticky sidebar for our project.
Let's go! The first step we need to install this library is:

npm install react-stickynode

The second step is adding the type of react-stickynode in our package.json file with the following command:

npm install --save @types/react-stickynode

Now we can see the following dependency in the package.json file “dependencies” part.

“@types/react-stickynode”: “3.0.0”,

Congratulations! Now we can use the stickynode features.
Suppose we have two components in the main section; the one for the sidebar and the other for the main content. There are two cases for the sidebar:

1- The sidebar height is the same or less than the main content. In this case, the sidebar must stick at the top of the page and it mustn't scroll, i.e. whether the main page can be scrolled or not, it has to be fixed. look at the picture below:

2-If the sidebar height is taller than the main content, i.e. it is taller than the viewport, and both the main content is being scrolled, and the sidebar is fixed at the top of the page, we can’t see the end of the sidebar. Oh, this is the bug! Just like the picture below:

So, what’s the solution?
As you know, perhaps we have several ways to solve this problem. But we want to use stickynode for this case.
After installing the react-stickynode and type of stickynode, import Sticky from ‘react-stickynode’ to the top of the sidebar component. Like this:

import Sticky from 'react-stickynode';

The sidebar’s component name can be an optional name like: Sidebar.
Now we insert this component in the default component from package ‘react-stickynode’, named

<Sticky>
    <Sidebar/>
</Sticky>

In case number one, when the user is scrolling the page down, react-stickynode will stick the sidebar to the top of the viewport. And in case number two, when the user is scrolling the page down react-stickynode will scroll along with the page until its bottom reaches the bottom of the viewport.
So, in the end:

The react-stickynode library provided some props for using them in the project. For example:

enabled
top
bottomBoundary
innerZ
enableTransforms
activeClass
innerClass
className
releasedClass
onStateChange
shouldFreeze

You can see these props and their documents with summary in this link :

https://github.com/yahoo/react-stickynode

DEV Community: Elaleh Aslani

How can we create the sticky sidebar for variable content in react?