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.

Sign up for GitHub

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

Jump to bottom

chore: Update way to check react version to switch to use react-dom/client #391

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

chore: Update way to check react version to switch to use react-dom/client #391

wants to merge 4 commits into from

Conversation

vctqs1
Copy link

@vctqs1 vctqs1 commented Feb 14, 2025

No description provided.

@vctqs1 vctqs1 requested a review from a team as a code owner February 14, 2025 06:31
@changeset-bot changeset-bot
Copy link

changeset-bot bot commented Feb 14, 2025 •
edited
Loading

🦋 Changeset detected

Latest commit: 1daa6bd

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
playroom Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@vctqs1 vctqs1 changed the title chore: adding check by major version instead string chore: adding check by React major version instead string, able to work with React@19 Feb 14, 2025
@vctqs1 vctqs1 changed the title chore: adding check by React major version instead string, able to work with React@19 chore: adding check by ReactDom major version instead string, able to work with react-dom@19 Feb 14, 2025
vctqs1
vctqs1 commented Feb 15, 2025
View reviewed changes
src/Playroom/Toolbar/Toolbar.tsx
@@ -157,13 +158,14 @@ export default ({ themes: allThemes, widths: allWidths, snippets }: Props) => {
</div>
<CSSTransition
in={isOpen}
nodeRef={nodeRef}
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To do this you dont need to use ReactDOM.findDOMNode which is removed in react@19
https://github.com/reactjs/react-transition-group/blob/2989b5b87b4b4d1001f21c8efa503049ffb4fe8d/src/ReplaceTransition.js#L32-L35

@vctqs1 vctqs1 changed the title chore: adding check by ReactDom major version instead string, able to work with react-dom@19 chore: Update way to check react version to switch to use react-dom/client Feb 15, 2025
@vctqs1
Copy link
Author

vctqs1 commented Feb 15, 2025

Hi @felixhabib, I'm creating this to enhance its capacity with React/ReactDOM@19. Could you please have a look at this?

The change inCSSTransition doesn't affect any behavior, but it's another way to avoid using ReactDOM.findDOMNode, which is being removed in React@19.
Here is the documentation for react-transition-group on using nodeRef:
🔗 React Transition Group - CSS Transition

And here are the specific lines mentioning it:
🔗 GitHub - ReplaceTransition.js#L32-L35

With these small updates, I can put react@19 in resolution in my project without any breaking changes.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@vctqs1