Hooks
Check hooks
React hooks for Slate editors
useComposing(): boolean
useComposing(): boolean
Get 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.) example.
useFocused(): boolean
useFocused(): boolean
Get the current focused
state of the editor.
useReadOnly(): boolean
useReadOnly(): boolean
Get the current readOnly
state of the editor.
useSelected(): boolean
useSelected(): boolean
Get the current selected
state of an element.
Editor hooks
useSlate(): ReactEditor
useSlate(): ReactEditor
Get the current editor object from the React context. Re-renders the context whenever changes occur in the editor.
useSlateWithV(): { editor: ReactEditor, v: number }
useSlateWithV(): { editor: ReactEditor, v: number }
The same as useSlate()
but includes a version counter which you can use to prevent re-renders.
useSlateStatic(): ReactEditor
useSlateStatic(): ReactEditor
Get the current editor object from the React context. A version of useSlate that does not re-render the context. Previously called useEditor
.
Selection hooks
useSlateSelection(): (BaseRange & { placeholder?: string | undefined; onPlaceholderResize?: ((node: HTMLElement | null) => void) | undefined }) | null
useSlateSelection(): (BaseRange & { placeholder?: string | undefined; onPlaceholderResize?: ((node: HTMLElement | null) => void) | undefined }) | null
Get 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): T
useSlateSelector<T>(selector: (editor: Editor): T, equalityFn?: (a: T, b: T) => boolean): T
Similar 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:
Last updated