React Suite é uma biblioteca de front-end popular com um conjunto de componentes React projetados para a plataforma intermediária e produtos de back-end. O componente Drawer é um painel que desliza a partir da borda da tela.  Podemos usar a seguinte abordagem no ReactJS para usar o React Suite Drawer Component.

Suportes de gaveta:

• autoFocus: a gaveta é aberta e automaticamente focada em si mesma, e pode ser acessada por leitores de tela quando definida como verdadeira.
• Pano de fundo: a gaveta exibirá o fundo quando for aberta quando definido como verdadeiro.
• backdropClassName: é usado para adicionar um nome de classe extra opcional a .modal-backdrop .
• classPrefix: é usado para denotar o prefixo da classe CSS do componente.
• enforceFocus: a gaveta impedirá que o foco saia quando aberto quando definido como verdadeiro.
• full: É usado para habilitar a tela inteira.
• teclado: fecha a gaveta quando a tecla ESC é pressionada.
• onEnter: é uma função de retorno de chamada que é acionada antes da transição da gaveta para dentro.
• onEntered: é uma função de retorno de chamada acionada após o término da transição do Drawer.
• onEntering: é uma função de retorno de chamada que é acionada quando a gaveta começa a fazer a transição.
• onExit: é uma função de retorno de chamada que é acionada logo antes da transição da gaveta para fora.
• onExited: É uma função de retorno de chamada que é acionada após o término da transição do Drawer.
• onExiting: É uma função de retorno de chamada que é acionada quando a gaveta começa a fazer a transição.
• onHide: É uma função de callback que é acionada quando o Drawer se esconde.
• onShow: É uma função de callback que é acionada quando o Gaveta é exibido.
• colocação: é utilizado para a colocação da Gaveta.
• Mostrar: É usado para mostrar Gaveta.
• tamanho: é usado para definir o tamanho da gaveta.

Criando o aplicativo React e instalando o módulo:

• Etapa 1: crie um aplicativo React usando o seguinte comando:

  npx create-react-app foldername

   

  
  
  
  

• Etapa 2: depois de criar a pasta do projeto, ou seja , nome da pasta , mova para ela usando o seguinte comando:

  cd foldername

• Etapa 3: depois de criar o aplicativo ReactJS, instale o necessário módulo usando o seguinte comando:

  npm install rsuite

Estrutura do projeto: terá a seguinte aparência.

Estrutura do Projeto

Exemplo: Agora anote o seguinte código no arquivo App.js. Aqui, App é nosso componente padrão onde escrevemos nosso código.

import React from 'react'
import 'rsuite/dist/styles/rsuite-default.css';
import { Drawer, Button } from 'rsuite'
  
  
export default function App() {
  
  // Drawer state
  const [isDrawerOpen, setIsDrawerOpen] = React.useState(false)
  
  // Function to close drawer
  const closeDrawer = () => {
    setIsDrawerOpen(false);
  }
  
  // Function to toggle Drawer
  const toggleDrawer = () => {
    setIsDrawerOpen(true);
  }
  
  return (
    <div style={{
      display: 'block', width: 700, paddingLeft: 30
    }}>
      <h4>React Suite Drawer Component</h4>
      <div>
        <Button onClick={toggleDrawer}>
          Open Drawer
        </Button>
        <Drawer
          show={isDrawerOpen}
          onHide={closeDrawer}
        >
          <Drawer.Header>
            <Drawer.Title>Sample Title for Drawer</Drawer.Title>
          </Drawer.Header>
          <Drawer.Body>
            Greetings from GeeksforGeeks!
          </Drawer.Body>
          <Drawer.Footer>
            <Button onClick={closeDrawer} appearance="primary">
              Confirm
            </Button>
            <Button onClick={closeDrawer} appearance="subtle">
              Cancel
            </Button>
          </Drawer.Footer>
        </Drawer>
      </div>
    </div>
  );
}

Etapa para executar o aplicativo: execute o aplicativo usando o seguinte comando do diretório raiz do projeto:

npm start

Resultado: agora abra seu navegador e vá para http: // localhost: 3000 / , você verá a seguinte saída:

Referência: https://rsuitejs.com/components/drawer/