Can the editable component ref be exposed?
See original GitHub issueCan the editable
component ref be exposed?
I want to trigger the events brought by the component through the similar
refEditor.current.onCut()
Issue Analytics
- State:
- Created 3 years ago
- Reactions:10
- Comments:9 (1 by maintainers)
Top Results From Across the Web
Refs and the DOM - React
Refs are created using React.createRef() and attached to React elements via the ref attribute. Refs are commonly assigned to an instance property when...
Read more >React ref to component not exposing method - Stack Overflow
I tried to keep the code as simple as possible in the example the filter out the noise, but I'll edit the question...
Read more >A complete guide to React refs - LogRocket Blog
Learn how to use React refs, and why it's important to use them only when React can't handle a function call through its...
Read more >Refs to Components | React
React supports a special attribute that you can attach to any component. The ref attribute can be a callback function, and this callback...
Read more >Template Refs - Vue.js
Note that you can only access the ref after the component is mounted. If you try to access $refs.input input in a template...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
One way around this issue: in parent component:
const editorRef = useRef()
and pass that down as a prop, in your slate component you can set that ref in a useEffect hook:The parent component will now have access to the editor ref as
editorRef.current
It seems like most people want the ref for focusing or for positioning purposes.
For focusing, there’s a helper that focuses,
ReactEditor.focus()
. It’s usually most successful in asetTimeout
.For positioning, you can get the dom node with
ReactEditor.toDOMNode(editor, editor)
as @msenejoa mentioned, or you could also wrap the editor in a div or some simple element that you grab a ref for.Are there any use cases that aren’t covered by these existing solutions? This is sounding like a problem with the docs and less a missing feature