diff --git a/packages/alert-dialog/src/index.js b/packages/alert-dialog/src/index.js index 799e84b17..d41021b0d 100644 --- a/packages/alert-dialog/src/index.js +++ b/packages/alert-dialog/src/index.js @@ -1,10 +1,10 @@ -import React, { createContext, forwardRef } from "react"; +import React from "react"; import Component from "@reach/component-component"; import { DialogOverlay, DialogContent } from "@reach/dialog"; import { Consumer as IdConsumer } from "@reach/utils/lib/IdContext"; import invariant from "invariant"; -let AlertDialogContext = createContext(); +let AlertDialogContext = React.createContext(); let AlertDialogOverlay = ({ leastDestructiveRef, ...props }) => ( diff --git a/packages/alert/src/index.js b/packages/alert/src/index.js index e658d41d1..cb1d2fe4d 100644 --- a/packages/alert/src/index.js +++ b/packages/alert/src/index.js @@ -12,7 +12,7 @@ // later. import React from "react"; -import { render } from "react-dom"; +import ReactDOM from "react-dom"; import Component from "@reach/component-component"; import VisuallyHidden from "@reach/visually-hidden"; @@ -42,7 +42,7 @@ let renderAlerts = () => { Object.keys(elements).forEach(type => { let container = liveRegions[type]; if (container) { - render( + ReactDOM.render(
( })} > {({ state, setState, refs }) => ( - + localStorage.setItem("todos", JSON.stringify(state.todos)) @@ -70,7 +70,7 @@ export let Example = () => (

- + )} ); diff --git a/packages/menu-button/src/index.js b/packages/menu-button/src/index.js index 4c6333716..aa36169a6 100644 --- a/packages/menu-button/src/index.js +++ b/packages/menu-button/src/index.js @@ -1,4 +1,4 @@ -import React, { createContext } from "react"; +import React from "react"; import Portal from "@reach/portal"; import { Link } from "@reach/router"; import Rect from "@reach/rect"; @@ -7,7 +7,7 @@ import Component from "@reach/component-component"; import { node, func, object, string, number, oneOfType } from "prop-types"; import { wrapEvent, checkStyles } from "@reach/utils"; -let { Provider, Consumer } = createContext(); +let { Provider, Consumer } = React.createContext(); let checkIfAppManagedFocus = ({ refs, state, prevState }) => { if (!state.isOpen && prevState.isOpen) { diff --git a/packages/portal/src/index.js b/packages/portal/src/index.js index 9540b26bf..7fe9b336c 100644 --- a/packages/portal/src/index.js +++ b/packages/portal/src/index.js @@ -1,5 +1,5 @@ import React from "react"; -import { createPortal } from "react-dom"; +import ReactDOM from "react-dom"; import Component from "@reach/component-component"; let Portal = ({ children, type = "reach-portal" }) => ( @@ -14,7 +14,7 @@ let Portal = ({ children, type = "reach-portal" }) => ( document.body.removeChild(node); }} render={({ refs: { node } }) => { - return node ? createPortal(children, node) : null; + return node ? ReactDOM.createPortal(children, node) : null; }} /> ); diff --git a/packages/utils/src/lib/IdContext.js b/packages/utils/src/lib/IdContext.js index 755099084..17bb9b6ad 100644 --- a/packages/utils/src/lib/IdContext.js +++ b/packages/utils/src/lib/IdContext.js @@ -1,4 +1,4 @@ -import React, { createContext } from "react"; +import React from "react"; // most things that we auto-id aren't server rendered, and are rendered into // portals anyway, so we can get away with random ids in a default context. If @@ -9,7 +9,7 @@ let genId = () => .toString(32) .substr(2, 6); -let IdContext = createContext(genId); +let IdContext = React.createContext(genId); // Apps can wrap their app in this to get the same IDs on the server and the // client