Use the import * as React from 'react' pattern

packages/@headlessui-react/CHANGELOG.md

@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix SSR tab hydration when using Strict Mode in development ([#2231](https://github.com/tailwindlabs/headlessui/pull/2231))
 - Don't break overflow when multiple dialogs are open at the same time ([#2215](https://github.com/tailwindlabs/headlessui/pull/2215))
 - Fix "This `Suspense` boundary received an update before it finished hydrating" error in the `Disclosure` component ([#2238](https://github.com/tailwindlabs/headlessui/pull/2238))
+- Use the `import * as React from 'react'` pattern ([#2242](https://github.com/tailwindlabs/headlessui/pull/2242))
 
 ## [1.7.8] - 2023-01-27
 

packages/@headlessui-react/src/components/combobox/combobox.tsx

@@ -1,4 +1,5 @@
-import React, {
+import * as React from 'react'
+import {
  Fragment,
  createContext,
  createRef,

packages/@headlessui-react/src/components/description/description.tsx

@@ -1,4 +1,5 @@
-import React, {
+import * as React from 'react'
+import {
  createContext,
  useContext,
  useMemo,

packages/@headlessui-react/src/components/dialog/dialog.tsx

@@ -1,5 +1,6 @@
 // WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/
-import React, {
+import * as React from 'react'
+import {
  createContext,
  createRef,
  useContext,

packages/@headlessui-react/src/components/disclosure/disclosure.tsx

@@ -1,5 +1,6 @@
 // WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/
-import React, {
+import * as React from 'react'
+import {
  Fragment,
  createContext,
  useContext,

packages/@headlessui-react/src/components/focus-trap/focus-trap.tsx

@@ -1,4 +1,5 @@
-import React, {
+import * as React from 'react'
+import {
  useEffect,
  useRef,
 

packages/@headlessui-react/src/components/label/label.tsx

@@ -1,4 +1,5 @@
-import React, {
+import * as React from 'react'
+import {
  createContext,
  useContext,
  useMemo,

packages/@headlessui-react/src/components/listbox/listbox.tsx

@@ -1,4 +1,5 @@
-import React, {
+import * as React from 'react'
+import {
  Fragment,
  createContext,
  createRef,

packages/@headlessui-react/src/components/menu/menu.tsx

@@ -1,5 +1,6 @@
 // WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/menubutton/
-import React, {
+import * as React from 'react'
+import {
  Fragment,
  createContext,
  createRef,

packages/@headlessui-react/src/components/popover/popover.tsx

@@ -1,4 +1,5 @@
-import React, {
+import * as React from 'react'
+import {
  createContext,
  createRef,
  useContext,

packages/@headlessui-react/src/components/portal/portal.tsx

@@ -1,4 +1,5 @@
-import React, {
+import * as React from 'react'
+import {
  Fragment,
  createContext,
  useContext,

packages/@headlessui-react/src/components/radio-group/radio-group.tsx

@@ -1,4 +1,5 @@
-import React, {
+import * as React from 'react'
+import {
  createContext,
  useContext,
  useMemo,

packages/@headlessui-react/src/components/switch/switch.tsx

@@ -1,4 +1,5 @@
-import React, {
+import * as React from 'react'
+import {
  Fragment,
  createContext,
  useContext,

packages/@headlessui-react/src/components/tabs/tabs.tsx

@@ -1,4 +1,5 @@
-import React, {
+import * as React from 'react'
+import {
  Fragment,
  createContext,
  useContext,

packages/@headlessui-react/src/components/transitions/transition.tsx

@@ -1,4 +1,5 @@
-import React, {
+import * as React from 'react'
+import {
  Fragment,
  createContext,
  useContext,

packages/@headlessui-react/src/hooks/use-event.ts

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { useLatestValue } from './use-latest-value'
 
 export let useEvent =

packages/@headlessui-react/src/hooks/use-id.ts

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { useIsoMorphicEffect } from './use-iso-morphic-effect'
 import { useServerHandoffComplete } from './use-server-handoff-complete'
 import { env } from '../utils/env'

packages/@headlessui-react/src/internal/focus-sentinel.tsx

@@ -1,4 +1,5 @@
-import React, { useState, FocusEvent as ReactFocusEvent } from 'react'
+import * as React from 'react'
+import { useState, FocusEvent as ReactFocusEvent } from 'react'
 
 import { Hidden, Features } from './hidden'
 

packages/@headlessui-react/src/internal/open-closed.tsx

@@ -1,4 +1,5 @@
-import React, {
+import * as React from 'react'
+import {
  createContext,
  useContext,
 

packages/@headlessui-react/src/internal/portal-force-root.tsx

@@ -1,4 +1,5 @@
-import React, {
+import * as React from 'react'
+import {
  createContext,
  useContext,
 

packages/@headlessui-react/src/internal/stack-context.tsx

@@ -1,4 +1,5 @@
-import React, {
+import * as React from 'react'
+import {
  createContext,
  useContext,
 

packages/@headlessui-react/src/utils/start-transition.ts

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 
 export let startTransition =
  // Prefer React's `startTransition` if it's available.