Skip to content
Related Articles

Related Articles

React Suite Affix Container

View Discussion
Improve Article
Save Article
  • Last Updated : 15 Jun, 2022
View Discussion
Improve Article
Save Article

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>
    );
}


Output:

 

Reference: https://rsuitejs.com/components/affix/#container


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!