Hooks
Last updated
Last updated
React hooks for Slate editors
useComposing(): booleanGet the current composing state of the editor. It deals with compositionstart, compositionupdate, compositionend events.
Composition events are triggered by typing (composing) with a language that uses a composition character (e.g. Chinese, Japanese, Korean, etc.) .
useFocused(): booleanGet the current focused state of the editor.
useReadOnly(): booleanGet the current readOnly state of the editor.
useSelected(): booleanGet the current selected state of an element.
useSlate(): EditorGet the current editor object from the React context. Re-renders the context whenever changes occur in the editor.
useSlateWithV(): { editor: Editor, v: number }The same as useSlate() but includes a version counter which you can use to prevent re-renders.
useSlateStatic(): EditorGet the current editor object from the React context. A version of useSlate that does not re-render the context. Previously called useEditor.
useSlateSelection(): (BaseRange & { placeholder?: string | undefined; onPlaceholderResize?: ((node: HTMLElement | null) => void) | undefined }) | nullGet the current editor selection from the React context. Only re-renders when the selection changes.
useSlateSelector<T>(selector: (editor: Editor) => T, equalityFn?: (a: T, b: T) => boolean): TSimilar to useSlateSelection but uses redux style selectors to prevent rerendering on every keystroke.
Returns a subset of the full selection value based on the selector.
Bear in mind rerendering can only prevented if the returned value is a value type or for reference types (e.g. objects and arrays) add a custom equality function for the equalityFn argument.
Example:
