@moser-inc/moser-labs-react

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 @moser-inc/moser-labs-themes

Usage

Setup

Wrap your application with the LabsProvider component to provide the app name, theme and favicon urls, and other potential configuration:

Note: passing the preset is currently on required and used for @moser-inc/moser-labs-custom-elements, but it will be used in the future when updating to PrimeReact 11+, so it's recommended to be included from the start.

// App.tsx
import { LabsProvider } from '@moser-inc/moser-labs-react';
import Labs from '@moser-inc/moser-labs-themes/labs';

const FAVICONS = {
  dark: 'favicon-dark.svg',
  light: 'favicon-light.svg',
};

const App = () => {
  return (
    <LabsProvider preset={Labs} appName="My App" favicons={FAVICONS}>
      {/* Your app components */}
    </LabsProvider>
  );
};

Styles

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