From b597b38f5582d66dc40e0a718b9a4ca3362453d5 Mon Sep 17 00:00:00 2001 From: Tijn Kersjes Date: Thu, 12 Dec 2024 16:19:18 +0100 Subject: [PATCH] feat: update Notification to support React 18 --- .changeset/neat-singers-love.md | 5 +++++ .../components/notification/src/Notification.tsx | 13 +++++++++++-- 2 files changed, 16 insertions(+), 2 deletions(-) create mode 100644 .changeset/neat-singers-love.md diff --git a/.changeset/neat-singers-love.md b/.changeset/neat-singers-love.md new file mode 100644 index 0000000000..5c7e59ec8a --- /dev/null +++ b/.changeset/neat-singers-love.md @@ -0,0 +1,5 @@ +--- +'@contentful/f36-notification': minor +--- + +Added support for React 18 in f36-notification package diff --git a/packages/components/notification/src/Notification.tsx b/packages/components/notification/src/Notification.tsx index 4d849c8a0e..44ef9cc3c4 100644 --- a/packages/components/notification/src/Notification.tsx +++ b/packages/components/notification/src/Notification.tsx @@ -1,7 +1,6 @@ /* global Promise */ import React from 'react'; -import { render } from 'react-dom'; import { NotificationsManager, ShowAction, @@ -35,7 +34,17 @@ function createRoot(callback: () => void) { const container = document.createElement('div'); document.body.appendChild(container); - render(, container, callback); + if (parseInt(React.version) >= 18) { + import("react-dom/client").then(module => { + const root = module.createRoot(container); + root.render(); + callback() + }); + } else { + import("react-dom").then(module => { + module.render(, container, callback); + }); + } } function afterInit(fn: Function) {