React Suite Affix Top

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. We can use the top affix to fix a component on top of the screen/display. 

Syntax:

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

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

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:

Example 1: Below example demonstrates the button affix at the Top. 

Javascript

import { Paragraph } from "@rsuite/icons";
import React from "react";
import { Affix, Button } from "rsuite/";
import "rsuite/dist/rsuite.min.css";

export default function App() {
    return (
        <center>
            <div style={{ padding: 20 }}>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite Affix Top
                </h4>

                <div style={{ marginTop: 20 }}>
                    <Affix>
                        <Button appearance="primary"
                            color="green">Top Affix</Button>
                    </Affix>
                    <Paragraph
                        style={{ fontSize: 1000 }}
                        rows={10}
                    />
                </div>
            </div>
        </center>
    );
}

Output:

Example 2: Below example demonstrates a navbar affix at the Top.  

Javascript

import { Paragraph } from "@rsuite/icons";
import Home from "@rsuite/icons/legacy/Home";
import React from "react";
import { Affix, Nav, Navbar } from "rsuite/";
import "rsuite/dist/rsuite.min.css";

export default function App() {
    return (
        <center>
            <div>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite Affix Top</h4>

                <div>
                    <Affix>
                        <Navbar>
                            <Navbar.Brand href="#">
                                GeeksforGeeks</Navbar.Brand>
                            <Nav>
                                <Nav.Item icon={<Home />}>
                                    Home</Nav.Item>
                                <Nav.Item>Tutorials</Nav.Item>
                                <Nav.Item>Practice</Nav.Item>
                                <Nav.Menu title="Jobs">
                                    <Nav.Item>Internships</Nav.Item>
                                    <Nav.Item>FTE</Nav.Item>
                                </Nav.Menu>
                            </Nav>
                        </Navbar>
                    </Affix>
                    <Paragraph style={{ fontSize: 1000 }}
                        rows={10} />
                </div>
            </div>
        </center>
    );
}

Output:

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