@reliability-design/react

React wrapper components for Reliability Design web components.

Installation

npm install @reliability-design/react

Usage

Basic Example

import { Button, Textfield, Card } from '@reliability-design/react';

function App() {
  return (
    <Card>
      <Textfield label="Username" placeholder="Enter your name" />
      <Button variant="primary">Submit</Button>
    </Card>
  );
}

Form Controls with State

React wrapper components provide event handlers that work seamlessly with React state:

import { useState } from 'react';
import { Textfield, Checkbox, Select, Switch, Slider } from '@reliability-design/react';

function FormExample() {
  const [username, setUsername] = useState('');
  const [accepted, setAccepted] = useState(false);
  const [country, setCountry] = useState('');
  const [enabled, setEnabled] = useState(false);
  const [volume, setVolume] = useState(50);

  return (
    <>
      <Textfield 
        value={username}
        onInputChange={(e) => setUsername(e.value)}
        label="Username"
      />
      
      <Checkbox
        status={accepted ? 'checked' : 'unchecked'}
        onChange={(e) => setAccepted(e.status === 'checked')}
        label="Accept Terms"
      />
      
      <Select
        selected={country}
        onChange={(e) => setCountry(e.value)}
        label="Country"
      />
      
      <Switch
        checked={enabled}
        onChange={(e) => setEnabled(e.checked)}
      />
      
      <Slider
        value={volume}
        onInput={(e) => setVolume(e.value)}
        min={0}
        max={100}
      />
    </>
  );
}

Event-Driven Components

import { useState } from 'react';
import { Tab, Accordion, Toast } from '@reliability-design/react';

function EventExample() {
  const [activeTab, setActiveTab] = useState(0);
  const [expanded, setExpanded] = useState(false);

  return (
    <>
      <Tab 
        selected={activeTab} 
        onTabChange={(e) => setActiveTab(e.index)}
      >
        <div slot="tab">Tab 1</div>
        <div slot="panel">Panel 1</div>
      </Tab>

      <Accordion
        expanded={expanded}
        onToggle={(e) => setExpanded(e.expanded)}
      >
        <div slot="header">Click to expand</div>
        <div slot="content">Hidden content</div>
      </Accordion>

      <Toast
        message="Operation successful"
        onDismissed={() => console.log('Toast dismissed')}
        onAction={() => console.log('Action clicked')}
      />
    </>
  );
}

Accessing Web Component Instance

Use React refs to access the underlying web component:

import { useRef } from 'react';
import { Textfield } from '@reliability-design/react';

function RefExample() {
  const textfieldRef = useRef<HTMLElement>(null);

  const focusInput = () => {
    textfieldRef.current?.focus();
  };

  return (
    <>
      <Textfield ref={textfieldRef} label="Focus me" />
      <button onClick={focusInput}>Focus Input</button>
    </>
  );
}

Component Categories

Form Controls (6)

• <Textfield /> - Text input with onInputChange event
• <Select /> - Select dropdown with onChange event
• <Checkbox /> - Checkbox with onChange event
• <Radio /> - Radio button with onChange event
• <Switch /> - Toggle switch with onChange event
• <Slider /> - Range slider with onInput event

Event-Driven Components (7)

• <Tab /> - Tab navigation with onTabChange
• <Menu /> - Menu with onMenuItemClick
• <Accordion /> - Expandable sections with onToggle
• <Chip /> - Removable chips with onRemoved
• <Toast /> - Toast notifications with onDismissed, onAction
• <Snackbar /> - Snackbar messages with onDismissed, onAction
• <Stepper /> - Step wizard with onStepChange

Passive Components (13)

• <Button /> - Button
• <Avatar /> - User avatar
• <Badge /> - Notification badge
• <Card /> - Card container
• <CardMedia /> - Card media
• <Container /> - Layout container
• <Divider /> - Visual divider
• <Layout /> - Flexbox layout
• <Progress /> - Progress indicator
• <Breadcrumb /> - Breadcrumb navigation
• <Alert /> - Alert messages
• <SegmentedButton /> - Segmented button group
• <Tooltip /> - Tooltip overlay

Creating Custom Wrappers

You can create your own React wrappers for custom web components:

import { createComponent } from '@reliability-design/react';

interface MyComponentProps {
  value?: string;
  onChange?: (detail: { value: string }) => void;
}

export const MyComponent = createComponent<MyComponentProps>({
  tagName: 'my-custom-element',
  events: {
    onChange: 'custom-change-event',
  },
});

Architecture

This package provides React wrapper components that:

• Forward all props as attributes/properties to web components
• Map CustomEvents to React event handlers
• Support ref forwarding to access underlying web component instances
• Automatically register web components on import
• Work with React 16.8+ (hooks support required)

TypeScript Support

All components are fully typed with TypeScript definitions for props and event handlers.

License

MIT