React Suite CheckPicker asíncrono

React suite 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, aprenderemos sobre React suite Checkpicker async. En el componente selector de verificación asíncrono, en lugar de cargar los elementos de datos en la parte superior de su aplicación y pasarlos directamente a un componente para su visualización, realizamos la carga de datos en el nivel del componente utilizando un control giratorio o un texto de carga.

Sintaxis:

import { CheckPicker } from "rsuite";
Function App() {
  return (
    <CheckPicker onOpen={updateData} 
      onSearch={updateData} data={data} />
  );
}

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:

 

Ejemplo 1: El siguiente ejemplo demuestra el componente de selector de verificación asíncrono básico.

import "rsuite/dist/rsuite.min.css";
import { CheckPicker } from "rsuite/";
import { useState } from "react";
import Spinner from '@rsuite/icons/legacy/Spinner'
  
export default function App() {
  
  // Sample courses data 
  const data = [{
    "label": "Java",
    "value": "Java",
  },
  {
    "label": "C++",
    "value": "C++",
  },
  {
    "label": "Python",
    "value": "Python",
  },
  {
    "label": "DSA mastery",
    "value": "DSA",
  },
  {
    "label": "Web Development",
    "value": "Web",
  },
  {
    "label": "Android Development",
    "value": "Android",
  },
  ]
  
  const [items, setItems] = useState([]);
  const updateOptions = () => {
    if (items.length === 0) {
      setItems(data); 
    }
  };
  const renderCheckPicker = (menu) => {
    if (items.length === 0) {
      return (
        <p style={{ 
          padding: 4, 
          color: 'green', 
          textAlign: 'center' 
        }}>
          <Spinner spin /> loading...
        </p>
  
      );
    }
    return menu;
  }
  
  return (
    <center>
      <div>
        <h2>GeeksforGeeks</h2>
        <h4 style={{ color: "green" }}>
          React Suite CheckPicker Async
        </h4>
  
        <div style={{ marginTop: 20, width: 800 }}>
        <CheckPicker 
          data={items}
          onOpen={updateOptions}
          onSearch={updateOptions} 
          style={{ width: 230 }}
          renderMenu={renderCheckPicker}
        />
        </div>
      </div>
    </center>
  );
}

Producción:

 

Ejemplo 2: Otro ejemplo que demuestra el componente selector de verificación asíncrono sin opciones de búsqueda y deshabilitadas.

import "rsuite/dist/rsuite.min.css";
import { CheckPicker } from "rsuite/";
import { useState } from "react";
import Spinner from '@rsuite/icons/legacy/Spinner'
  
export default function App() {
  
  // Sample courses data 
  const data = [{
    "label": "Java",
    "value": "Java",
  },
  {
    "label": "C++",
    "value": "C++",
  },
  {
    "label": "Python",
    "value": "Python",
  },
  {
    "label": "DSA mastery",
    "value": "DSA",
  },
  {
    "label": "Web Development",
    "value": "Web",
  },
  {
    "label": "Android Development",
    "value": "Android",
  },
  ]
  
  const [items, setItems] = useState([]);
  const updateOptions = () => {
    if (items.length === 0) {
      setItems(data); 
    }
  };
  const renderCheckPicker = (menu) => {
    if (items.length === 0) {
      return (
        <p style={{ 
          padding: 4, 
          color: 'green',
          textAlign: 'center' 
        }}>
          <Spinner spin /> loading...
        </p>
  
      );
    }
    return menu;
  }
  
  return (
    <center>
      <div>
        <h2>GeeksforGeeks</h2>
        <h4 style={{ color: "green" }}>
          React Suite CheckPicker Async
        </h4>
  
        <div style={{ marginTop: 20, width: 800 }}>
        <CheckPicker 
          data={items}
          onOpen={updateOptions}
          onSearch={updateOptions} 
          style={{ width: 230 }}
          renderMenu={renderCheckPicker}
          searchable={false}
          disabledItemValues={['Web', 'Python']}
        />
        </div>
      </div>
    </center>
  );
}

Producción:

 

Referencia: https://rsuitejs.com/components/check-picker/#async