GluestackUIProvider

GluestackUIProvider component that can be used to configure the library. It consists of StyledProvider, OverlayProvider and ToastProvider internally.

Basic

Advanced

Basic

Following is the default implementation of the GluestackUIProvider component without any additional customization. This serves as a starting point for users who are new to this library and want to learn about the basic functionality and appearance of the component.

function App() {
  return (
    <GluestackUIProvider config={config}>
      <Button>
        <ButtonText>Hello World</ButtonText>
      </Button>
    </GluestackUIProvider>
  )
}

Import

You have to import the Provider from the library at the root level of your application

import { GluestackUIProvider } from "@darden/design-system"

Anatomy

The structure provided below can help you identify and understand a GluestackUIProvider component's various parts.

export default () => (
  <GluestackUIProvider config={config}>{children}</GluestackUIProvider>
)

Advanced

We provide in-depth information on how to customize and extend the component's functionality to meet your needs. Below, we describe how to modify the component to suit your requirements.

We have also exported all the providers separately so that you can use them individually.

GluestackUIStyledProvider

To use only config and styled functionalities, you can use GluestackUIStyledProvider component.

import { GluestackUIStyledProvider } from "@darden/design-system"
import { config } from "@gluestack-ui/config"

;<GluestackUIStyledProvider config={config}>
  <Button>
    <ButtonText>Hello World</ButtonText>
  </Button>
</GluestackUIStyledProvider>

OverlayProvider

To use only overlay functionalities, you can use OverlayProvider component.

import { OverlayProvider } from "@gluestack-ui/overlay"

ToastProvider

We have separated ToastProvider and OverlayProvider so that you can use them individually and decide the priority of the provider.

import { ToastProvider } from "@gluestack-ui/toast"

To create your own provider, here is the example of how you can create your own provider.

import React from "react"
import { createProvider } from "@gluestack-ui/provider"
import { StyledProvider } from "@gluestack-style/react"
import { OverlayProvider } from "@gluestack-ui/overlay"
import { ToastProvider } from "@gluestack-ui/toast"

const GluestackUIStyledProvider = createProvider({ StyledProvider })

const GluestackUIProvider = ({ children, ...props }: any) => {
  return (
    <GluestackUIStyledProvider>
      <OverlayProvider>
        <ToastProvider>{children}</ToastProvider>
      </OverlayProvider>
    </GluestackUIStyledProvider>
  )
}

Customizing the Provider

We have a function called createProvider which can be used to create provider with StyledProvider exported from @gluestack-style/react. You can pass configuration object which consists theme. You can change the theme object specific to your brand. Refer gluestack.io/style for more information on how to create a theme.

Usage

// import the createProvider function
import { createProvider } from "@gluestack-ui/provider"
import { config } from "@gluestack-ui/config"
import { StyledProvider } from "@gluestack-style/react"

export const Provider = createProvider({
  StyledProvider,
})

// Using the Provider component
export default () => (
  <Provider config={config}>
    <Text />
  </Provider>
)

You can also create GluestackUIProvider component which can be used to wrap your entire application. This will make sure that all the components are wrapped with the provider with styling and other providers like OverlayProvider and ToastProvider.

// import the createProvider function
import { StyledProvider } from "@gluestack-style/react"
import { OverlayProvider } from "@gluestack-ui/overlay"
import { ToastProvider } from "@gluestack-ui/toast"

const GluestackUIStyledProvider = createProvider({ StyledProvider })

const GluestackUIProvider = ({ children, ...props }: any) => {
  return (
    <GluestackUIStyledProvider>
      <OverlayProvider>
        <ToastProvider>{children}</ToastProvider>
      </OverlayProvider>
    </GluestackUIStyledProvider>
  )
}

Edit this page on GitHub