Options
All
  • Public
  • Public/Protected
  • All
Menu

@collabs/react

Index

Type Aliases

CollabsTextInputProps: { text: CText } & Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "value" | "type" | "defaultValue" | "ref">

Props for CollabsTextInput.

Variables

CollabsTextInput: ForwardRefExoticComponent<{ text: CText } & Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "value" | "type" | "defaultValue" | "ref"> & RefAttributes<CollabsTextInputHandle>> = ...

An <input type="text" /> component that syncs its state to a Collabs CText, provided in the text prop.

Local changes update text collaboratively, and remote updates to text show up in the input field. We also manage the local selection in the usual way for collaborative text editing.

Props

  • text: CText: The Collabs CText to sync to.
  • Otherwise the same as HTMLInputElement, except we omit a few that don't make sense (value, defaultValue, type).

Advanced usage

  • To change the text programmatically, mutate text.
  • You may intercept and prevent events like onKeyDown.
  • We expose a number of <input> methods through our ref (CollabsTextInputHandle), including the ability to set selectionStart / selectionEnd. Once set, the selection will move around as usual.

Functions

  • objectKey(obj: object): string
  • Returns a React key that acts like obj with === comparisons.

    This is a workaround to let you use an object as a React key. E.g., in a CList, you should use objectKey(value: Collab) as a React key instead of value's Position, since CList.move can change a value's position.

    Parameters

    • obj: object

    Returns string

  • useCollab(collab: Collab<CollabEventsRecord>): void
  • React hook that schedules a rerender whenever collab emits an event, indicating that its state changed.

    You should call this hook in any component that reads collab's state.

    Warning: If you define a custom CObject subclass, it will not automatically emit an event each time one of its children does. Either call useCollab on each child that you read, or have the CObject emit its own events in response to child events.

    Parameters

    • collab: Collab<CollabEventsRecord>

    Returns void

Generated using TypeDoc