React Suite CheckPicker Pie de página adicional

React Suite es una biblioteca front-end diseñada para la plataforma intermedia y los productos back-end. El componente React Suite CheckPicker se utiliza como selector múltiple de datos. También podemos agrupar datos usando este componente.

El renderExtraFooter en React Suite CheckPicker proporciona una forma de agregar un pie de página adicional al CheckPicker, que podemos personalizar aún más a nuestra manera. Este pie de página se puede utilizar para proporcionar funcionalidades adicionales al componente CheckPicker y puede mejorar la interfaz de usuario.

React Suite CheckPicker Pie de página adicional Atributos/Accesorios:

• renderExtraFooter: Esto se usa para agregar un pie de página adicional al CheckPicker, que podemos personalizar aún más a nuestra manera.

Sintaxis:

<CheckPicker renderExtraFooter={}/>

Requisito previo:

• Introducción e Instalación reactJS
• Componente React Suite CheckPicker
• Gancho de reacción useRef

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

Paso 1: cree la carpeta del proyecto de reacción, para eso abra la terminal y escriba el comando npm create-react-app folder_name , si ya instaló create-react-app globalmente. Si no lo ha hecho, instale create-react-app globalmente usando el comando npm -g create-react-app o instálelo localmente con npm i create-react-app .

npm create-react-app project

Paso 2: después de crear la carpeta de su proyecto (es decir, proyecto), muévase a ella usando el siguiente comando.

cd project

Paso 3:  ahora instala la dependencia usando el siguiente comando:

npm install rsuite

Estructura del proyecto: Se verá así:

 

Ejemplo 1: estamos importando el componente CheckPicker desde «rsuite» y para aplicar los estilos predeterminados de los componentes estamos importando «rsuite/dist/rsuite.min.css» .

Ahora, para el componente CheckPicker, estamos personalizando un pie de página adicional usando renderExtraFooter . Estamos agregando un div con algo de estilo como pie de página del CheckPicker.

import { CheckPicker } from "rsuite";
import "rsuite/dist/rsuite.min.css";
  
function App() {
    return (
        <div className="App">
            <h4>
                React Suite CheckPicker Extra footer 
            </h4>
            <div style={{ marginLeft: 10 }}>
                <CheckPicker
                    placeholder="select"
                    renderExtraFooter={() => (
                        <div style={{ 
                                backgroundColor: "green", 
                                padding: 10, 
                                color: "white" 
                            }}>
                            <h4>Extra Footer</h4>
                        </div>
                    )}
                />
            </div>
        </div>
    );
}
export default App;

Paso para ejecutar la aplicación: ejecute la aplicación con el siguiente comando desde el directorio raíz del proyecto.

npm start

Producción:

 

Ejemplo 2: estamos importando el componente CheckPicker desde «rsuite» y para aplicar los estilos predeterminados de los componentes estamos importando «rsuite/dist/rsuite.min.css» .

Estamos personalizando aún más el componente de pie de página adicional CheckPicker agregando un botón con un clic llamado onCloseHandle , una función que cierra el menú desplegable del componente y muestra un mensaje de «¡CheckPicker se cerrará!» en la alerta.

Estamos agregando accesorios de datos al componente CheckPicker como países, que es una lista de nombres de países, estamos agregando un marcador de posición como «seleccionar países» . Estamos agregando el componente selector usando el gancho useRef y lo llamamos checkPicker . están agregando un botón con una etiqueta de cierre, que llamará a la función onCloseHandle al hacer clic en el componente de pie de página adicional.

import { useRef } from "react";
import { CheckPicker } from "rsuite";
import "rsuite/dist/rsuite.min.css";
  
function App() {
    const checkPicker = useRef();
    //data
    const countries = [
        {
            label: "India",
            value: "India",
        },
        {
            label: "Germany",
            value: "Germany",
        },
        {
            label: "Sri Lanka",
            value: "Sri Lanka",
        },
    ];
  
    const onCloseHandle = () => {
        checkPicker.current.close();
        alert(" CheckPicker  will close!");
    };
    return (
        <div className="App">
            <h4> 
                React Suite CheckPicker Extra footer 
            </h4>
            <div style={{ marginLeft: 10 }}>
                <CheckPicker
                    placeholder="Select Countries"
                    data={countries}
                    ref={checkPicker}
                    renderExtraFooter={() => (
                        <div style={{ 
                                backgroundColor: "green", 
                                padding: 10, 
                                color: "white" 
                            }}>
                            <button
                                style={{
                                    border: "2px solid white",
                                    backgroundColor: "transparent",
                                }}
                                onClick={onCloseHandle}>
                                close
                            </button>
                        </div>
                    )}
                />
            </div>
        </div>
    );
}
export default App;

Paso para ejecutar la aplicación: ejecute la aplicación con el siguiente comando desde el directorio raíz del proyecto.

npm start

Producción:

 

Referencia: – https://rsuitejs.com/components/check-picker/#extra-footer