Skip to main content
Version: Next

UI React

React wrappers for @editora/ui-core Web Components, providing React-friendly props, typed callback details, and hooks/providers for enhanced developer experience.

Quick Start​

npm install @editora/ui-react @editora/ui-core

If you only need sortable without the broader packages:

npm install @editora/ui-sortable

Use the standalone React wrapper from:

import { Sortable } from '@editora/ui-sortable/react';
import { Button, Input, ThemeProvider } from '@editora/ui-react';

export function App() {
  return (
    <ThemeProvider>
      <div style={{ display: 'grid', gap: 12, maxWidth: 360 }}>
        <Input name="title" label="Title" placeholder="Untitled" clearable />
        <Button variant="primary">Save</Button>
      </div>
    </ThemeProvider>
  );
}

Key Features​

  • React-Friendly Props: Convert web component attributes to React props
  • Typed Events: TypeScript interfaces for event callbacks
  • Hooks & Providers: State management and context providers
  • Form Integration: Built-in form validation and submission handling
  • Theme Support: Seamless integration with theme system
  • Accessibility: Enhanced ARIA attributes and keyboard navigation

Component Categories​

Form & Input Components​

Data Display​

  • AnimatedNumber - Animated numeric display with multiple visual variants
  • Table - Basic table component
  • DataTable - Advanced data table
  • Chart - Data visualization
  • Timeline - Timeline visualization
  • Tree - Hierarchical data display
  • Sortable - Production-ready drag and drop for reorder, transfer, hierarchy, persistence, standalone web component usage, and a standalone React wrapper
  • Marquee - Infinite scrolling content rail
  • AnimatedText - Text-first animation for headlines, callouts, and hero copy
  • AnimatedBeam - Integration and orchestration diagram with animated beam paths
  • Dock - MacOS-style magnifying launcher and command shelf
  • Orbiter - Multi-ring orbital motion around a central focal point

Overlay & Modal​

Navigation & Layout​

Interactive Components​

Providers & Hooks​

Theme Management​

import { ThemeProvider, useTheme } from '@editora/ui-react';

function App() {
  return (
    <ThemeProvider tokens={{ colors: { primary: '#0f766e' } }}>
      <MyComponent />
    </ThemeProvider>
  );
}

function MyComponent() {
  const { tokens, setTokens } = useTheme();
  // Use theme tokens
}

Form Management​

import { Form, useForm } from '@editora/ui-react';

function MyForm() {
  const { ref, submit, isDirty, getValues } = useForm();

  return (
    <Form ref={ref} onSubmit={(values) => console.log(values)}>
      {/* Form fields */}
      <button onClick={() => submit()} disabled={!isDirty()}>
        Save
      </button>
    </Form>
  );
}

Dialog Management​

import { DialogProvider, useDialog } from '@editora/ui-react';

function MyComponent() {
  const dialog = useDialog();

  const handleClick = async () => {
    const result = await dialog.confirm({
      title: 'Are you sure?',
      description: 'This action cannot be undone.'
    });
    
    if (result) {
      // Proceed with action
    }
  };

  return <button onClick={handleClick}>Delete</button>;
}

Documentation Structure​

Component Documentation​

Each component includes:

  • Props Reference: Complete TypeScript prop interfaces
  • Usage Examples: Basic and advanced usage patterns
  • Best Practices: Guidelines for optimal usage
  • Accessibility: ARIA attributes and keyboard navigation
  • Styling: CSS custom properties and theming options

Examples​

Integration Guides​

  • Form integration with validation
  • Theme system integration
  • State management integration
  • TypeScript integration
  • Accessibility best practices

Styling & Theming​

All components support the Editora design system with:

  • CSS Custom Properties: Full theming support
  • Variant System: Multiple visual variants
  • Size Options: Consistent sizing across components
  • Responsive Design: Mobile-first approach
  • Dark Mode: Built-in dark theme support

Accessibility​

Components include:

  • Proper ARIA attributes
  • Keyboard navigation support
  • Screen reader compatibility
  • Focus management
  • High contrast support

Performance Notes​

  • Sortable is production-ready for standard and moderately large boards, with tested pointer drag, keyboard sorting, transfer, and nested workflows
  • Sortable is not virtualized, so very large visible datasets should still be benchmarked with your real item count before release

Migration Guide​

For users migrating from other UI libraries:

Examples​

Explore interactive examples in our Live Playground.