Skip to content
Related Articles
Open in App
Not now

Related Articles

React Suite Affix Top

Improve Article
Save Article
  • Difficulty Level : Basic
  • Last Updated : 27 Jun, 2022
Improve Article
Save Article

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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!