MarkedInputProps

Defined in: react/markput/src/components/MarkedInput.tsx:33

Props for MarkedInput component.

Example

<MarkedInput<ChipProps>
  Mark={Chip}
  options={[{
    markup: '@[__value__]',
    mark: { label: 'Click me' }
  }]}
/>

Type Parameters

Type Parameter	Default type	Description
TMarkProps	MarkProps	Type of props for the global Mark component
TOverlayProps	OverlayProps	Type of props for the global Overlay component

Properties

className?

optional className: string;

Defined in: react/markput/src/components/MarkedInput.tsx:47

Additional classes

---

defaultValue?

optional defaultValue: string;

Defined in: react/markput/src/components/MarkedInput.tsx:68

Initial value for uncontrolled mode

---

drag?

optional drag:
  | boolean
  | {
  alwaysShowHandle: boolean;
};

Defined in: react/markput/src/components/MarkedInput.tsx:77

Enable drag mode: each individual token (mark or text) becomes its own draggable row. One mark per row, one text fragment per row. Adjacent marks need no separator; adjacent text rows are separated by \n\n.

---

Mark?

optional Mark: ComponentType<TMarkProps>;

Defined in: react/markput/src/components/MarkedInput.tsx:37

Global component used for rendering markups (fallback for option.mark.slot)

---

onChange()?

optional onChange: (value) => void;

Defined in: react/markput/src/components/MarkedInput.tsx:70

Change event handler

Parameters

Parameter	Type
value	string

Returns

void

---

options?

optional options: Option<TMarkProps, TOverlayProps>[];

Defined in: react/markput/src/components/MarkedInput.tsx:45

Configuration options for markups and overlays. Each option can specify its own slot component via mark.slot or overlay.slot. Falls back to global Mark/Overlay components when not specified.

---

Overlay?

optional Overlay: ComponentType<TOverlayProps>;

Defined in: react/markput/src/components/MarkedInput.tsx:39

Global component used for rendering overlays (fallback for option.overlay.slot)

---

readOnly?

optional readOnly: boolean;

Defined in: react/markput/src/components/MarkedInput.tsx:72

Read-only mode

---

ref?

optional ref: Ref<MarkputHandler>;

Defined in: react/markput/src/components/MarkedInput.tsx:35

Ref to handler

---

showOverlayOn?

optional showOverlayOn: OverlayTrigger;

Defined in: react/markput/src/components/MarkedInput.tsx:64

Events that trigger overlay display

Default

'change'

---

slotProps?

optional slotProps: SlotProps;

Defined in: react/markput/src/components/MarkedInput.tsx:59

Props to pass to slot components

Example

slotProps={{ container: { onKeyDown: handler }, span: { className: 'custom' } }}

---

slots?

optional slots: Slots;

Defined in: react/markput/src/components/MarkedInput.tsx:54

Override internal components using slots

Example

slots={{ container: 'div', span: 'span' }}

---

style?

optional style: CSSProperties;

Defined in: react/markput/src/components/MarkedInput.tsx:49

Additional style

---

value?

optional value: string;

Defined in: react/markput/src/components/MarkedInput.tsx:66

Annotated text with markups