Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(React): add nodeRef prop #478

Merged
merged 1 commit into from
May 12, 2020
Merged

feat(React): add nodeRef prop #478

merged 1 commit into from
May 12, 2020

Conversation

STRML
Copy link
Collaborator

@STRML STRML commented May 11, 2020

If running in React Strict mode, ReactDOM.findDOMNode() is deprecated.
Unfortunately, in order for to work properly, we need raw access
to the underlying DOM node. If you want to avoid the warning, pass a nodeRef
as in this example:

function MyComponent() {
  const nodeRef = React.useRef(null);
  return (
    <Draggable nodeRef={nodeRef}>
      <div ref={nodeRef}>Example Target</div>
    </Draggable>
  );
}

This can be used for arbitrarily nested components, so long as the ref ends up
pointing to the actual child DOM node and not a custom component.

Thanks to react-transition-group for the inspiration.
nodeRef is also available on .

Supersedes #430
Fixes #440, #465

If running in React Strict mode, ReactDOM.findDOMNode() is deprecated.
Unfortunately, in order for <Draggable> to work properly, we need raw access
to the underlying DOM node. If you want to avoid the warning, pass a `nodeRef`
as in this example:

function MyComponent() {
  const nodeRef = React.useRef(null);
  return (
    <Draggable nodeRef={nodeRef}>
      <div ref={nodeRef}>Example Target</div>
    </Draggable>
  );
}

This can be used for arbitrarily nested components, so long as the ref ends up
pointing to the actual child DOM node and not a custom component.

Thanks to react-transition-group for the inspiration.
`nodeRef` is also available on <DraggableCore>.
@STRML STRML merged commit fc26ec1 into master May 12, 2020
@dimazuien
Copy link

Looks like nodeRef is missing in typings

daylesalmon pushed a commit to wmcadigital/wmn-disruptions that referenced this pull request May 21, 2020
daylesalmon added a commit to wmcadigital/wmn-disruptions that referenced this pull request May 22, 2020
* Updated packages

* Fixed a "cannot set state on unmounted...." error being casued by resize event listeners

* Implement fix for draggable as per: react-grid-layout/react-draggable#478. Fixes #160 - Draggable causes console.error.

* Ensure the view is ready.

* Added a default of blank for value on autocomplete

* Started to fix weird scroll to error happening on map

* Moved click event to its own custom hook so it updates click handlers as the maps state changes

* Fixed typos

* Removed console.log
@Jack-Works
Copy link

Looks like nodeRef is missing in typings

Does it added now?

@dimazuien
Copy link

Nope, I had this issue on version 4.4.2 which is still the latest one

STRML added a commit that referenced this pull request Jun 5, 2020
STRML added a commit that referenced this pull request Jun 5, 2020
@STRML STRML deleted the feat/nodeRef branch June 8, 2020 15:43
@STRML
Copy link
Collaborator Author

STRML commented Jun 8, 2020

Released in v4.4.3

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Support <React.StrictMode>
3 participants