Contenedor de afijos de React Suite

Una suite de React es una biblioteca de componentes de React, un diseño de interfaz de usuario sensato y una experiencia de desarrollo amigable. Es compatible con todos los principales navegadores. Proporciona componentes preconstruidos de React que se pueden usar fácilmente en cualquier aplicación web.

En este artículo, veremos sobre el afijo superior de la suite de reacción. El afijo se usa generalmente para páginas con contenido largo, fija los elementos especificados en el rango visible de la página para ayudar en la operación rápida. En un contenedor, si el contenedor está en el rango visible, el elemento de afijo es fijo, pero cuando el contenedor de la página de desplazamiento no está en el rango visible, el elemento de afijo no está fijo.

Fijar accesorios:

• children: Denota el elemento child para este componente.
• classPrefix: Denota el prefijo de la clase CSS del componente.
• contenedor: Especifica el contenedor.
• onChange: Esta es una función de devolución de llamada que cuando se activa cuando cambia el estado no fijo y fijo.
• top: Establece la altura de la parte superior fija del afijo.

Creación de la aplicación React e instalación del módulo:

Paso 1: Cree una aplicación React usando el comando dado:

npm create-react-app projectname

Paso 2: después de crear su proyecto, muévase a él usando el comando dado:

cd projectname

Paso 3: ahora instale el paquete de Nodes rsuite usando el comando dado:

npm install rsuite

Estructura del proyecto: ahora la estructura de su proyecto debería tener el siguiente aspecto:

 

Sintaxis:

// 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>
}

Ejemplo 1: El siguiente ejemplo muestra el botón adjunto en un contenedor.

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

Producción:

 

Ejemplo 2: El siguiente ejemplo muestra un afijo de barra de navegación usando un contenedor.

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

Producción:

 

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