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

Fix deprecated findDOMNode usage in React 19 #909

Open
wants to merge 5 commits into
base: master
Choose a base branch
from

Conversation

jtwite
Copy link

@jtwite jtwite commented Feb 4, 2025

Update the library to remove the use of deprecated findDOMNode and replace it with a ref-based approach.

  • NonStrictPanel.tsx

    • Replace findDOMNode with React.createRef to access the DOM element.
    • Update the nativeElement getter to return the current ref.
    • Modify the render method to clone the element with the ref.
  • ReactElementProvider.ts

    • Update the constructor to accept a ref instead of a StrictPanel or NonStrictPanel.
    • Update the element getter to return the current ref.
    • Modify the show and hide methods to use the ref.
  • Flicking.tsx

    • Remove the useFindDOMNode prop and use a ref-based approach.
    • Update the _createPanelRefs method to use React.createRef.
    • Update the _getPanels method to use the new ref-based approach.
  • ReactRenderer.ts

    • Update the _collectPanels method to use the new ref-based approach.
    • Update the _createPanel method to use the new ref-based approach.
  • package-lock.json

    • Update the version to 4.12.0-snapshot.

Update the library to remove the use of deprecated `findDOMNode` and replace it with a ref-based approach.

* **NonStrictPanel.tsx**
  - Replace `findDOMNode` with `React.createRef` to access the DOM element.
  - Update the `nativeElement` getter to return the current ref.
  - Modify the `render` method to clone the element with the ref.

* **ReactElementProvider.ts**
  - Update the constructor to accept a ref instead of a `StrictPanel` or `NonStrictPanel`.
  - Update the `element` getter to return the current ref.
  - Modify the `show` and `hide` methods to use the ref.

* **Flicking.tsx**
  - Remove the `useFindDOMNode` prop and use a ref-based approach.
  - Update the `_createPanelRefs` method to use `React.createRef`.
  - Update the `_getPanels` method to use the new ref-based approach.

* **ReactRenderer.ts**
  - Update the `_collectPanels` method to use the new ref-based approach.
  - Update the `_createPanel` method to use the new ref-based approach.

* **package-lock.json**
  - Update the version to `4.12.0-snapshot`.
@CLAassistant
Copy link

CLAassistant commented Feb 4, 2025

CLA assistant check
All committers have signed the CLA.

* Add `nativeElement` getter to return the current ref
* Update `ReactElementProvider.ts` constructor to accept a ref instead of a `StrictPanel` or `NonStrictPanel`
* Update `element` getter to return the current ref
* Replace `useFindDOMNode` prop with a ref-based approach in `Flicking.tsx`
* Update `_createPanelRefs` method to use `React.createRef`
* Update `_getPanels` method to use the new ref-based approach
* Update `_collectPanels` method in `ReactRenderer.ts` to use the new ref-based approach
* Update `_createPanel` method to use the new ref-based approach
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.

2 participants