aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorAjay <[email protected]>2022-10-11 00:04:02 -0400
committerAjay <[email protected]>2022-10-11 00:04:02 -0400
commit5ebd44c0c7d74bb11649a9e01b154dc792926228 (patch)
treea04a8ca9d528a43f785683f82434c0872a8260fc
parent9888dcc323191d652e88ab92f4ae381e50d9de53 (diff)
downloadSponsorBlock-5ebd44c0c7d74bb11649a9e01b154dc792926228.tar.gz
SponsorBlock-5ebd44c0c7d74bb11649a9e01b154dc792926228.zip
update category pill for react 18
-rw-r--r--src/render/CategoryPill.tsx10
1 files changed, 5 insertions, 5 deletions
diff --git a/src/render/CategoryPill.tsx b/src/render/CategoryPill.tsx
index 266796d1..af4f3f1b 100644
--- a/src/render/CategoryPill.tsx
+++ b/src/render/CategoryPill.tsx
@@ -1,5 +1,6 @@
import * as React from "react";
import * as ReactDOM from "react-dom";
+import { createRoot, Root } from "react-dom/client";
import CategoryPillComponent, { CategoryPillState } from "../components/CategoryPillComponent";
import Config from "../config";
import { VoteResponse } from "../messageTypes";
@@ -10,6 +11,7 @@ import { Tooltip } from "./Tooltip";
export class CategoryPill {
container: HTMLElement;
ref: React.RefObject<CategoryPillComponent>;
+ root: Root;
unsavedState: CategoryPillState;
@@ -38,10 +40,8 @@ export class CategoryPill {
this.unsavedState = this.ref.current.state;
}
- ReactDOM.render(
- <CategoryPillComponent ref={this.ref} vote={vote} />,
- this.container
- );
+ this.root = createRoot(this.container);
+ this.root.render(<CategoryPillComponent ref={this.ref} vote={vote} />);
if (this.unsavedState) {
this.ref.current?.setState(this.unsavedState);
@@ -64,7 +64,7 @@ export class CategoryPill {
}
close(): void {
- ReactDOM.unmountComponentAtNode(this.container);
+ this.root.unmount();
this.container.remove();
}