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

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