dorj-lookup-editor

Dorj Lookup Editor is a customizable React component for selecting and searching entities, built with Material-UI and react-select.

Features

• Supports both synchronous and asynchronous options loading
• Material-UI styled select and input components
• Multi-select and single-select modes
• RTL (Right-to-Left) support
• Customizable option labels and values
• Helper text, labels, and outlined variant support

Installation

npm install dorj-lookup-editor

Peer Dependencies

Make sure you have the following peer dependencies installed in your project:

• react >=16.x
• @mui/material
• @mui/styles
• react-select

Usage

import React from "react";
import LookupEditor from "dorj-lookup-editor";

function MyComponent({ hub }) {
  return (
    <LookupEditor
      hub={hub}
      entityName="User"
      nameField="name"
      searchFields={["username", "email"]}
      otherFields={["id"]}
      top={10}
      label="Select User"
      helperText="Choose a user from the list"
      isMulti={false}
      value={null}
      onChange={selected => console.log(selected)}
    />
  );
}

Props

| Prop | Type | Description | |------------------|------------|-----------------------------------------------------------------------------| | hub | object | Required. Data source with a getEntityList method | | entityName | string | Required. Name of the entity to search | | nameField | string | Required. Field to display as the option label | | searchFields | array | Fields to search in addition to nameField | | otherFields | array | Additional fields to include in the query | | top | number | Maximum number of results to fetch | | label | string | Input label | | helperText | string | Helper text below the input | | isMulti | bool | Enable multi-select mode | | value | any | Selected value(s) | | onChange | function | Callback when selection changes | | variant | string | "outlined" for outlined input style | | isRtl | bool | Enable RTL layout | | options | array | Provide static options instead of async loading | | loadOptions | function | Custom async options loader | | getOptionLabel | function | Custom function to get option label | | getOptionValue | function | Custom function to get option value | | placeholder | string | Placeholder text | | noOptionsMessage| string | Message to display when no options are found | | queryOptions | object | Additional query options for the data source | | useAdmin | bool | Use admin privileges for the query |

Development

• Build: npm run build
• Watch: npm run dev

License

MIT