@bangle.dev/react
This package provides you with a React API for integrating Bangle in your React app.
#
Installation# peer depsnpm install @bangle.dev/core @bangle.dev/pmnpm install @bangle.dev/react
#
Usageimport '@bangle.dev/core/style.css';
import { useEditorState, BangleEditor } from '@bangle.dev/react';
export default function Editor() { const editorState = useEditorState({ initialValue: 'Hello world!', }); return <BangleEditor state={editorState} />;}
💡 Do not forget to load the stylesheet located at '@bangle.dev/core/style.css'.
React.Element#
BangleEditor:A React component for rendering a Bangle instance.
#
Propsid: ?string
The id of the DOM node bangle mounts on. Please make sure this is unique if you are having multiple editors.className: ?string
The CSS class names for the container div of the editor. (The editor div has the class.bangle-editor
).style ?Object
The style object for the container div of the editor.renderNodeViews: ?fn({ children, node, view, getPos, decorations, selected, attrs, updateAttrs}) -> React.Element
Allows customization of how a Node is rendered in the DOM. This will be called with anode
and you are expected to return a matching React component for thenode.type
. You are also expected to correctly nest thechildren
props. Note:children
prop is not available for atom nodes. See React custom rendering guidefocusOnInit: ?boolean=true
Brings editor to focus when it loads.onReady: ?fn(editor)
A callback which is called when the editor has mounted.children: ?React.Element
React components which need the editor context but are not directly editable i.e. do not lie inside the contentEditable of the editor. A good example of what can bechildren
is FloatingMenu.state: BangleEditorState
The state of your editor. It is recommended that you use useEditorState hook to create it.pmViewOpts: ?Prosemirror.DirectEditorProps
#
useEditorState: ReactHookA hook for initialing the editor state.
💡 This hook will never trigger a re-render, if you want to react to a change in your editor consider using usePluginState. Read React Basic example.
📖 Checkout React example
#
usePluginState: ReactHookfn(pluginKey
<T>
): T
A hook for hooking to a Prosemirror plugin's state. Thishook works only with children of <BangleEditor />
. This will re-render the React component every-time the plugin's state changes.
#
useEditorViewContext: ReactHookfn(): Prosemirror.EditorView
A hook for providing the Prosemirror.EditorView to a React component. This context is only available to children of <BangleEditor />
. It will never trigger a re-render as the hook maintains the same Prosemirror.EditorView instance throughout the editor's lifecycle.
📖 Checkout Floating menu dropdown example.