gatsby-plugin-bianic-ui/gatsby-browser.js

Drop-in Chakra UI support for Gatsby sites

import React from "react"
import {
  ThemeProvider,
  ColorModeProvider,
  CSSReset,
  GlobalStyle,
  PortalManager,
} from "@bianic-ui/core"
import theme from "./src/theme"

export const wrapRootElement = (
  { element },
  { isResettingCSS = true, isUsingColorMode = true, portalZIndex = 40 },
) => {
  const ModeProvider = isUsingColorMode ? ColorModeProvider : React.Fragment
  return (
    <ThemeProvider theme={theme}>
      <ModeProvider>
        <GlobalStyle />
        {isResettingCSS && <CSSReset />}
        <PortalManager zIndex={portalZIndex}>{element}</PortalManager>
      </ModeProvider>
    </ThemeProvider>
  )
}