react-fenestra v1.1.1

Introdução

react-fenestra

Componente Responsivo em React para Interface de Usuário com Desktop, Ícones, Janelas e Barra de Tarefas.

Live Preview

Clique para acessar o preview

Instalação

Via NPM:

npm install react-fenestra

Utilização

//Importações padrão do React
import React from 'react';
import ReactDOM from 'react-dom/client';

// Importação dos componentes do React-Fenestra
import { Desktop, Icon } from 'react-fenestra';

//Aplicação da folha de estilo do Bootstrap e do Fenestra (necessário).
import "bootstrap/dist/css/bootstrap.css";
import "react-fenestra/css/fenestra.css";

//Importação de bibliotecas do FontAwesome (opcional).
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faWindowRestore } from '@fortawesome/free-solid-svg-icons';

//Renderização do nó raiz da aplicação
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>    
    <Desktop
      icons={[
        ({ fenestra }) =>
          <Icon title="Abrir Janela"
            icon={<FontAwesomeIcon icon={faWindowRestore} size="3x" />}
            onClick={() => fenestra.open({
              title: "Nova Janela",
              content: ({ fenestra }) =>
                <h1>Olá Mundo!</h1>
            })}
          />
      ]}
    />
  </React.StrictMode>
);

Resultado

API

\<Desktop \/>

Renderiza um novo desktop com capacidade para gerenciar janelas. Possui uma única Propriedade icons para que seja repassada uma lista de itens clicáveis da Área de Trabalho

Observe que o parâmetro icons recebe uma lista de Definições de componentes que receberão a propriedade fenestra com toda a interface de gerenciamento das janelas.

Exemplo de Definições

import React from 'react';
class MeuIcone extends React.Component {
    render(){
        return <button onClick={() => this.props.fenestra.open({title: "Nova Janela"})}>Abrir Janela</button>
    }
}
export default MeuIcone;

ou ainda:

const MeuIcone = ({fenestra}) => 
<button onClick={() => fenestra.open({title: "Nova Janela"})}>Abrir Janela</button>;

export default MeuIcone;

\<Icon \/>

Componente utilitário para exibição dos ícones do Desktop

A propriedade fenestra

Todos os componentes renderizados no conteúdo das janelas recebem a propriedade fenestra, a qual possui os seguintes métodos e atributos:

Notas da Versão

1.1.0

• Aprimoramento do redimensionamento das janelas

1.0.9

• Melhorias na responsividade da interface

Licença

MIT

Autor

Luiz Alfredo Galiza alfredogaliza@gmail.com

Engenheiro da Computação formado pela Universidade Federal do Pará, trabalha há mais de 20 anos na área de programação. É oficial do Corpo de Bombeiros Militar e atualmente coordena a equipe de desenvolvimento de sistemas da Secretaria de Segurança Pública do Pará.