bec-react-components
v0.1.67
Published
A React component library by [BECOM Electronics](https://www.becom-group.com), built with TypeScript and Vite.
Readme
bec-react-components
A React component library by BECOM Electronics, built with TypeScript and Vite.
Installation
npm install bec-react-componentsImport the stylesheet in your app entry point (e.g. main.tsx):
import 'bec-react-components/dist/style.css';Wrap your app root with BecAppContainer (provides layout, key binding context, and font):
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import { BecAppContainer } from 'bec-react-components';
import 'bec-react-components/dist/style.css';
import App from './App';
createRoot(document.getElementById('root')!).render(
<StrictMode>
<BrowserRouter>
<BecAppContainer>
<App />
</BecAppContainer>
</BrowserRouter>
</StrictMode>,
);Add a <div id="modal"></div> to your index.html (required for modals):
<body>
<div id="root"></div>
<div id="modal"></div>
</body>Components
| Category | Components |
|---|---|
| Buttons | BecButton, BecImageButton |
| Containers | BecAppContainer, BecPanel, BecPanelContainer, BecPanelRowContainer, BecInputContainer, BecButtonRowContainer |
| Inputs | BecInput, BecCheckbox, BecDropdown, BecGenericSearch |
| Form Inputs | BecFormInput, BecFormGenericSearch |
| Outputs | BecHeader, BecLabel, BecTextOutput, BecKeyedOutput, BecError |
| Tables | BecTable |
| Modals | BecModal, BecOkModal, BecYesNoModal |
| Topbar | BecTopbar |
Documentation
Detailed documentation for each component category is in the docs/ folder:
Development
npm install
npm run dev # Start dev server (live component demo app)
npm run build # Build the library