React Components

This is the React wrapper library generated from the LMVZ-DS Components package via Stencil.

Package Layout

This package provides:

• Auto-generated React wrappers for all LMVZ components (in lib/components/generated/, do not edit)
• Re-exported utilities from @lmvz-ds/components/public-utils

Build

Always build via Turbo from the repository root to compile TypeScript and generate the distribution bundle:

pnpm exec turbo run build --filter=@lmvz-ds/react

Usage

Import components from @lmvz-ds/react and render them as JSX:

import React from 'react';
import { LmvzButton, LmvzSelect } from '@lmvz-ds/react';

export function MyComponent() {
  const [selected, setSelected] = React.useState<string | undefined>();

  return (
    <>
      <LmvzButton variant="primary">Click me</LmvzButton>
      <LmvzSelect
        label="Choose one"
        value={selected}
        onLmvzChange={(e) => setSelected(e.detail)}
      >
        <option value="">-- Select --</option>
        <option value="ch">Switzerland</option>
        <option value="de">Germany</option>
      </LmvzSelect>
    </>
  );
}

Event Handling

Stencil's React output target wraps custom component events as camelCased React props. A component's @Event emitter (e.g., lmvzChange) becomes an onLmvzChange prop:

| Component Event | React Prop | Event Detail | | ---------------------- | --------------- | ------------------------------------------------- | | @Event() lmvzChange | onLmvzChange | Component-specific payload (check component docs) | | @Event() actionClick | onActionClick | MouseEvent | | @Event() lmvzSubmit | onLmvzSubmit | Form-related data |

Event handlers receive a synthetic event object with a detail property containing the custom event payload:

<LmvzSelect onLmvzChange={(event) => console.log(event.detail)}>
  {/* ... */}
</LmvzSelect>

Note: These are not React's SyntheticEvent instances — they are wrapper objects around native DOM events. For advanced use cases, access the underlying DOM event via event.nativeEvent if needed.

lmvz-select Value Handling

Value Type

The value and values props control which option is selected:

• Single-select mode (multiple false or unset): bind to value (string or null)
• Multiselect mode (multiple true): bind to values (string[])

// Single-select
const [selected, setSelected] = React.useState<string | null>(null);
<LmvzSelect value={selected} onLmvzChange={(e) => setSelected(e.detail)}>

// Multiselect
const [selected, setSelected] = React.useState<string[]>([]);
<LmvzSelect multiple values={selected} onLmvzChange={(e) => setSelected(e.detail)}>

Property Binding for values (Multiselect)

The values prop is a JS property only, and thus not attribute-reflected. JSX property binding (which Stencil's React output target handles correctly) works as expected:

// ✓ Correct: property binding
<LmvzSelect multiple values={selectedValues} />

// ✓ Also correct: controlled component pattern
const [selected, setSelected] = React.useState<string[]>(['ch']);
<LmvzSelect
  multiple
  values={selected}
  onLmvzChange={(e) => setSelected(e.detail)}
/>

Unlike template-driven frameworks, JSX always binds via properties, so the property-only nature of values is transparent to React consumers.

Runtime multiple Mode Switching

Toggling the multiple prop at runtime is an app-level responsibility. The component does not automatically reset its value when switching modes. When you toggle multiple:

1. The previously-active value (now in the inactive field) is ignored.
2. You must explicitly reset the value to match the new mode's shape:

const [multiple, setMultiple] = React.useState(false);
const [selected, setSelected] = React.useState<string | string[] | null>(null);

const handleModeToggle = () => {
  const newMultiple = !multiple;
  setMultiple(newMultiple);

  // Reset value to match the new mode
  if (newMultiple) {
    // Single → multi: wrap in array
    setSelected(typeof selected === 'string' ? [selected] : []);
  } else {
    // Multi → single: unwrap first element
    setSelected(Array.isArray(selected) ? (selected[0] ?? null) : null);
  }
};

Auto-Generated Files (Do Not Edit)

• lib/components/generated/** — all files in this directory are auto-generated by Stencil's React output target during @lmvz-ds/components production build
• Manual edits will be silently overwritten on the next build

Further Help

For more information on React and JSX patterns, see the React documentation.

For component-specific API details, refer to the component documentation in the published design system or the component source file's JSDoc comments.