React components for the Moser Labs suite of applications. Build on top of PrimeReact.
npm i primereact @moser-inc/moser-labs-react
Wrap your application with the LabsProvider
component to provide the app name, theme and favicon urls, and other potential configuration:
// App.tsx
import { LabsProvider } from '@moser-inc/moser-labs-react';
const FAVICONS = {
dark: 'favicon-dark.svg',
light: 'favicon-light.svg',
};
const THEMES = {
dark: 'theme-dark.css',
light: 'theme-light.css',
};
const App = () => {
return (
<LabsProvider appName="My App" favicons={FAVICONS} themes={THEMES}>
{/* Your app components */}
</LabsProvider>
);
};
Either load all component styles in your entry point, which may include unused styles:
// main.tsx
import '@moser-inc/moser-labs-react/style.css';
Or when using UnoCSS with a bundler like Vite, configure your content sources to include labs components to load only the styles that are used:
// uno.config.ts
import { defineConfig } from 'unocss';
export default defineConfig({
content: {
pipeline: {
include: [
/(.*\/)primereact(.*)\.(c|m)?(js)(x?)$/, // primereact
/(.*\/)@moser-inc\/moser-labs-react(.*)\.(c|m)?(js)(x?)$/, // @moser-inc/moser-labs-react
/\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/, // default
],
},
},
});
// App.tsx
import { LabsButton } from '@moser-inc/moser-labs-react';
const App = () => {
return (
<div>
<LabsButton>Moser Labs</LabsButton>
</div>
);
};