Moser Labs React

React components for the Moser Labs suite of applications. Build on top of PrimeReact.

Installation

npm i primereact @moser-inc/moser-labs-react

Usage

Setup

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>
  );
};

Styles

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>
  );
};