• English

      • Shared Components

      NocoBase client v2 includes a set of shared components. When building plugin pages, settings pages, or forms, you can use these components directly to reuse NocoBase UI and interactions.

      This section groups components by usage scenario. Each page covers one component: when to use it, its common API, and whether it can be previewed in the docs.

      Quick Reference

      I want to...Where to look
      Control the low-level full-screen scannerCodeScanner
      Put a standard form in a dialogDialogFormLayout
      Put a standard form in a drawerDrawerFormLayout
      Allow only $env environment variablesEnvVariableInput
      Enter a file size and store it as bytesFileSizeInput
      Edit JSON / JSON5 configurationJsonTextArea
      Enter a password with a strength indicatorPasswordInput
      Load Select options asynchronously from an APIRemoteSelect
      Add scanning support to an inputScanInput
      Allow a field to accept both constants and variablesTypedVariableInput
      Let a single-line field accept variables such as {{ $env.X }} and {{ $user.name }}VariableInput
      Insert variables into JSON / JSON5 configurationVariableJsonTextArea
      Let multi-line text accept variablesVariableTextArea
      Filter a Collection with multiple conditionsCollectionFilter
      Embed a Collection filter panel in a pageCollectionFilterPanel
      Customize the draggable row of an antd TableSortableRow
      Customize the drag handle column of a TableSortHandle
      Display lists, select rows, and drag-sort rows on settings pagesTable
      Use Ant Design icons or register custom iconsIcon
      Create an internal registry for plugin extension itemscreateFormRegistry

      Usage

      Import the components you need in a client plugin, then use them like regular React components:

      import { RemoteSelect, Table } from '@nocobase/client-v2';

function SettingsPage() {
  return (
    <>
      <RemoteSelect request={loadOptions} />
      <Table rowKey="id" columns={columns} dataSource={records} />
    </>
  );
}

      When to use these components

      Use React + Antd by default. Check these components first for common NocoBase plugin scenarios:

      • Open drawer or dialog forms on settings pages
      • Insert variables, edit JSON, enter file sizes, or scan codes in form fields
      • Use Collection filters or drag sorting in list pages
      • Use NocoBase's unified icon entry

      For ordinary inputs, buttons, and messages, Antd components are usually clearer.