@laboratoria/react

@laboratoria/react

Este repo contiene componentes, hooks y otras cositas que queremos reusar entre varias interfaces de Laboratoria. Este módulo depende de @laboratoria/sdk-js y contiene un hook (useApp) que nos da acceso al objeto app del SDK. Con lo cual, si estás usando este módulo desde una app en React, no necesitas instalar directamente @laboratoria/sdk-js.

Se asume que las interfaces en cuestión todas usan React, React router DOM y MUI.

{
  "peerDependencies": {
    "@mui/material": "^5.3.1",
    "@mui/styles": "^5.3.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.0.2"
  }
}

Hooks

• useApp

El hook useApp nos da una referencia al objeto app de @laboratoria/sdk-js, el cual se puede configurar con las siguientes variables de entorno:

• REACT_APP_FIREBASE_API_KEY
• REACT_APP_FIREBASE_PROJECT
• REACT_APP_LABORATORIA_CORE_API_URL
• REACT_APP_LABORATORIA_JOBS_API_URL

Componentes

• Loading
• ModelForm
• RelationPicker
• DistinctFilter

MUI

• themeConfig
• Base CSS

Example

import React from 'react';
import ReactDOM from 'react-dom';
import {
  createTheme,
  ThemeProvider,
  StyledEngineProvider,
} from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
// Importamos `AppProvider` y `themeConfig`
import { AppProvider, themeConfig } from '@laboratoria/react';
// Importamos el CSS base...
import '@laboratoria/react/src/theme/index.css';
import App from './components/App';

ReactDOM.render(
  <React.StrictMode>
    <StyledEngineProvider injectFirst>
      <ThemeProvider theme={createTheme(themeConfig)}>
        <AppProvider>
          <CssBaseline />
          <App />
        </AppProvider>
      </ThemeProvider>
    </StyledEngineProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

---

Dev install

Install omitting peers deps when using via symlink.

npm i --omit peer