React Suite Affix Container

Last Updated : 15 Jun, 2022

A React suite is a library of React components, sensible UI design, and a friendly development experience. It is supported in all major browsers. It provides pre-built components of React which can be used easily in any web application.

In this article, we’ll see about react suite affix top. Affix is generally used for pages with long content, fixed the specified elements in the visible range of the page to assist in the quick operation. In a container, if the container is in the visible range, the affix element is fixed but when the scrolling page container is not in the visible range, the affix element is unfixed.

Affix Props:

children: It denotes the children element for this component.
classPrefix: It denotes the prefix of the component CSS class.
container: It specifies the container.
onChange: This is a callback function that when triggered when the non-fixed and fixed state changes.
top: It sets the fixed-top height of the affix.

Creating React Application And Installing Module:

Step 1: Create a React application using the given command:

npm create-react-app projectname

Step 2: After creating your project, move to it using the given command:

cd projectname

Step 3: Now Install the rsuite node package using the given command:

npm install rsuite

Project Structure: Now your project structure should look like the following:

Syntax:

// Import statement
import Affix from 'rsuite/Affix';

// App.Js File
const ref = createRef()

function App() {
<div>
    <div ref={ref}>
        <p>...</p>
           <Affix top={50}>
              <Button>...</Button>
        </Affix>
           <p>...</p>
       </div>
       <p>...</p>
</div>
}

Example 1: Below example demonstrates the button affix in a container.

Javascript

import { Paragraph } from "@rsuite/icons"; 
import React, { createRef } from "react"; 
import { Affix, Button } from "rsuite/"; 
import "rsuite/dist/rsuite.min.css"; 
  
export default function App() { 
    const containerRef = createRef(); 
  
    return ( 
        <center> 
            <div> 
                <h2>GeeksforGeeks</h2> 
                <h4 style={{ color: "green" }}> 
                    React Suite Affix Container 
                </h4> 
  
                <div ref={containerRef}  
                    style={{ background: "lightgreen" }}> 
  
                    <Paragraph style={{ fontSize: 1000 }}  
                        rows={10} /> 
                    <Affix 
                        top={0} 
                        container={() => { 
                            return containerRef.current; 
                        }} 
                    > 
                        <Button appearance="primary" 
                            color="green"> 
                            Affix Button 
                        </Button> 
                    </Affix> 
                    <Paragraph style={{ fontSize: 1000 }}  
                        rows={10} /> 
                </div> 
                <Paragraph style={{ fontSize: 1000 }}  
                    rows={20} /> 
            </div> 
        </center> 
    ); 
}

Output:

Example 2: Below example demonstrates a navbar affix using a container.

Javascript

import { Paragraph } from "@rsuite/icons"; 
import React, { createRef } from "react"; 
import { Affix, Button, Nav } from "rsuite/"; 
import "rsuite/dist/rsuite.min.css"; 
  
export default function App() { 
    const containerRef = createRef(); 
  
    return ( 
        <center> 
            <div> 
                <h2>GeeksforGeeks</h2> 
                <h4 style={{ color: "green" }}> 
                    React Suite Affix Container 
                </h4> 
  
                <div ref={containerRef}  
                    style={{ background: "white" }}> 
                    <Paragraph style={{ fontSize: 1000 }} 
                         rows={10} /> 
                    <Affix 
                        top={0} 
                        container={() => { 
                            return containerRef.current; 
                        }} 
                    > 
                        <Nav style={{ backgroundColor: 'black' }}> 
                            <Nav.Item>Home</Nav.Item> 
                            <Nav.Item>Practice</Nav.Item> 
                            <Nav.Item>Tutorials</Nav.Item> 
                            <Nav.Item>Contact us</Nav.Item> 
                            <Nav.Item>About</Nav.Item> 
                        </Nav> 
                    </Affix> 
                </div> 
                <Paragraph style={{ fontSize: 1000 }} rows={20} /> 
            </div> 
        </center> 
    ); 
}