@chakra-ui/react ChakraProvider TypeScript Examples

Source File: Chakra.tsx From ksana.in with Apache License 2.0

6 votes

export function Chakra({ cookies, children }: any) {
  const colorModeManager =
    typeof cookies === 'string' ? cookieStorageManager(cookies) : localStorageManager

  return (
    <ChakraProvider resetCSS colorModeManager={colorModeManager} theme={theme}>
      {children}
    </ChakraProvider>
  )
}

Source File: WizardStepControlPanel.test.tsx From ke with MIT License

6 votes

getComponent = (): JSX.Element => {
  const currentState = 'begin'
  const analytics = undefined

  return (
    <ChakraProvider>
      <WizardStepControlPanel
        wizardStep={testWizardStep}
        wizard={testWizard}
        provider={testProvider}
        mainWizardObject={{ id: 100500 }}
        analytics={analytics}
        submitChange={jest.fn()}
        currentState={currentState}
        setCurrentState={jest.fn()}
        refreshMainDetailObject={jest.fn()}
        setMainDetailObject={jest.fn()}
        notifier={testNotifier}
      />
    </ChakraProvider>
  )
}

Source File: EventWelcome.tsx From dope-monorepo with GNU General Public License v3.0

6 votes

export default function EventWelcome(props: Props) {
    const [ loading, setLoading ] = useState(false);
    
    useEffect(() => {
        props.manager.events.on('game', () => setLoading(true));
    }, []);

    return (
        <ChakraProvider theme={theme}>
            <Center style={{
                height: "100vh",
                backdropFilter: "brightness(50%)",
            }}>
                {loading ? <Spinner size="xl" color="white" /> : <Container style={{
                    padding: "1rem",
                    borderStyle: "solid",
                    boxShadow: "0px 0px 15px rgba(0,0,0,1)",
                    borderColor: "black",
                    borderWidth: "0px",
                    backgroundColor: "white",
                    borderRadius: "7px",
                }}>
                {
                    <Stepper 
                        manager={props.manager} 
                    />
                }
                </Container>}
            </Center>
        </ChakraProvider>
    );
}

Source File: index.tsx From nextjs-hasura-boilerplate with MIT License

6 votes

Layout: FC = ({ children }) => {
  return (
    <ChakraProvider theme={theme}>
      <Navbar />
      <Box maxW="xl" mx="auto" w="full" py={8}>
        {children}
      </Box>
    </ChakraProvider>
  );
}

Source File: index.tsx From ledokku with MIT License

6 votes

ReactDOM.render(
  <React.StrictMode>
    <ApolloProvider client={apolloClient}>
      <ChakraProvider>
        <AuthProvider>
          <GlobalStyle />
          <BrowserRouter>
            <Router />
          </BrowserRouter>
        </AuthProvider>
      </ChakraProvider>
    </ApolloProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

Source File: _app.tsx From eth-dapps-nextjs-boiletplate with MIT License

6 votes

export default function App({ Component, pageProps }: AppProps) {
    return (
        <GlobalStore>
            <ChakraProvider>
                <Component {...pageProps} />
            </ChakraProvider>
        </GlobalStore>
    )
}

Source File: _app.tsx From lucide with ISC License

6 votes

App = ({ Component, pageProps }) => {
  return (
    <>
      <Head>
        <title>Lucide</title>
      </Head>
      <ChakraProvider theme={customTheme}>
        <MobileNavigationProvider>
          <CustomizeIconContext>
            <Component {...pageProps} />
          </CustomizeIconContext>
        </MobileNavigationProvider>
      </ChakraProvider>
    </>
  );
}

Source File: themeProvider.tsx From wiregui with MIT License

6 votes

export default function ThemeContainer({ children }: ThemeContainerProps) {
  return (
    <ChakraProvider theme={theme}>
      <ColorModeProvider options={{ initialColorMode: "dark" }}>
        <CSSReset />
        {children}
      </ColorModeProvider>
    </ChakraProvider>
  );
}

Source File: _app.tsx From next-crud with MIT License

6 votes

App = ({ Component, pageProps }: AppProps) => {
  return (
    <QueryClientProvider client={queryClient}>
      <ChakraProvider resetCSS>
        <Component {...pageProps} />
      </ChakraProvider>
    </QueryClientProvider>
  )
}

Source File: ComponentPreview.test.tsx From openchakra with MIT License

6 votes

function renderWithRedux(
  components: React.ReactNode,
  {
    // @ts-ignore
    initialState,
    // @ts-ignore
    store = init(storeConfig),
  } = {},
) {
  return {
    ...render(
      <ChakraProvider resetCSS theme={theme}>
        <DndProvider backend={Backend}>
          <Provider store={store}>{components}</Provider>
        </DndProvider>
      </ChakraProvider>,
    ),
    // adding `store` to the returned utilities to allow us
    // to reference it in our tests (just try to avoid using
    // this to test implementation details).
    store,
  }
}

Source File: _app.tsx From website with MIT License

6 votes

export default function CustomAppPage({ Component, pageProps, router }: AppProps) {
  const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || ''

  return (
    <CacheProvider value={emotionCache}>
      <ChakraProvider theme={theme}>
        <Head>
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
          <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
          <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
          <link rel="shortcut icon" href="/favicon.ico" />
          <link rel="manifest" href="/manifest.json" />
          <meta name="msapplication-TileColor" content="#83e4fc" />
          <meta name="theme-color" content="#83e4fc" />
        </Head>

        <DefaultSeo
          title="ReactJS ID"
          titleTemplate="%s · ReactJS Indonesia"
          description="ReactJS ID adalah komunitas para developer React dan React Native. Kami mengadakan ajang meetup setiap bulannya, dimana para developer React bertukar informasi mengenai React dan ekosistemnya."
          canonical={baseUrl + router.asPath || ''}
          openGraph={{
            title: 'ReactJS ID',
            url: baseUrl,
            description:
              'ReactJS ID adalah komunitas para developer React dan React Native. Kami mengadakan ajang meetup setiap bulannya, dimana para developer React bertukar informasi mengenai React dan ekosistemnya.',
            type: 'website',
            site_name: 'ReactJS ID'
          }}
        />

        <Component {...pageProps} />
      </ChakraProvider>
    </CacheProvider>
  )
}

Source File: Chakra.tsx From coindrop with GNU General Public License v3.0

6 votes

Chakra: FunctionComponent<Props> = ({ cookies, children }) => {
  const colorModeManager = typeof cookies === "string" ? cookieStorageManager(cookies) : localStorageManager;
  return (
      <ChakraProvider
        colorModeManager={colorModeManager}
        theme={theme}
      >
        {children}
      </ChakraProvider>
  );
}

Source File: App.tsx From calories-in with MIT License

6 votes

function App() {
  const [foods] = useState(loadFoods)

  return (
    <ChakraProvider theme={theme}>
      <ScreenSizeProvider>
        <OneTimeCheckStoreProvider>
          <PortionsStoreProvider>
            <FoodsStoreProvider initialFoods={foods}>
              <MainLayout>
                <DietEditor />
              </MainLayout>
            </FoodsStoreProvider>
          </PortionsStoreProvider>
        </OneTimeCheckStoreProvider>
      </ScreenSizeProvider>
    </ChakraProvider>
  )
}

Source File: index.tsx From phonepare with MIT License

6 votes

ReactDOM.render(
  <React.StrictMode>
    <RecoilRoot>
      <ChakraProvider>
        <App />
      </ChakraProvider>
    </RecoilRoot>
  </React.StrictMode>,
  document.getElementById('root'),
)

Source File: RenderDetail.test.tsx From ke with MIT License

6 votes

test('Render detail mount', () => {
  jest.spyOn(React, 'useEffect').mockImplementation(() => ({ data: { patient: { last_name: 'Test' } } }))

  const component = mount(
    <MemoryRouter initialEntries={['/test/']}>
      <ChakraProvider>
        <RenderDetail resourceName="test" admin={testAdmin} provider={testProvider} user={{}} analytics={undefined} />
      </ChakraProvider>
    </MemoryRouter>
  )

  expect(component.find('ArrowLeft').length).toEqual(1)
  expect(component.find('div[data-test-id="testAdmin"]').length).toEqual(1)
})

Source File: index.tsx From bluebubbles-server with Apache License 2.0

6 votes

ReactDOM.render(
    <React.StrictMode>
        <Provider store={store}>
            <ColorModeScript initialColorMode={theme.config.initialColorMode} />
            <ChakraProvider theme={theme} colorModeManager={localStorageManager}>
                <App />
            </ChakraProvider>
        </Provider>
    </React.StrictMode>,
    document.getElementById('root')
);

Source File: app.tsx From video-chat with MIT License

6 votes

export default function App(){
  return (
    <ChakraProvider>
      <StoreProvider>
        <Router/>
        <ToastContainer/>
      </StoreProvider>
    </ChakraProvider>
  )
}

Source File: CourseDetailsPage.tsx From fresh-coupons with GNU General Public License v3.0

6 votes

function CourseDetailsPage() {
  const [couponState, setCouponState] = useState<CouponState>(CouponState.NotFound)
  const [courseDetails, setCourseDetails] = useState<CourseDetailsWithCouponCode | undefined>()
  const courses = useCourses()

  useEffect(() => {
    const currentUrl = location.href.split('?')[0]
    const courseDetails = courses.freeCourses[currentUrl] || courses.coursesWithCoupon[currentUrl]
    if (courseDetails) {
      setCourseDetails(courseDetails)
      if (!courseDetails.isAlreadyAFreeCourse) {
        determineCouponStateAsync().then(setCouponState)
      }
    }
  }, [courses])

  function onCouponApplied() {
    determineCouponStateAsync().then(setCouponState)
  }

  if (courseDetails?.isAlreadyAFreeCourse) {
    return <div>Already a free course!</div>
  }

  return (
    <ChakraProvider>
      {couponState === CouponState.Pending && (<CouponAvailableBanner
          couponCode={courseDetails!.couponData!.couponCode}
          discountPercentage={courseDetails!.couponData!.discountPercentage + '%'}
          onCouponApplied={onCouponApplied}/>
      )}
      {couponState === CouponState.Applied && <CouponAppliedBanner />}
      {couponState === CouponState.Expired && <CouponExpiredBanner />}
    </ChakraProvider>
  );
}

Source File: test-utils.tsx From jsonschema-editor-react with Apache License 2.0

6 votes

AllProviders = ({ children }: { children?: React.ReactNode }) => (
  <ChakraProvider theme={theme}>{children}</ChakraProvider>
)

Source File: FullPageSpinner.test.tsx From rari-dApp with GNU Affero General Public License v3.0

6 votes

test("renders spinner", async () => {
  render(
    <ChakraProvider>
      <FullPageSpinner />
    </ChakraProvider>
  );

  expect(screen.getByTestId("full-page-spinner")).toBeInTheDocument();
});

Source File: DateTimeRangeListWidget.test.tsx From ke with MIT License

6 votes

getComponent = (props?: Partial<DateTimeRangeWidgetProps>): JSX.Element => (
  <ChakraProvider>
    <DateTimeRangeListWidget
      name="test"
      resource="test-resource"
      analytics={undefined}
      widgetAnalytics={jest.fn()}
      helpText="test"
      mainDetailObject={detailObject}
      dataSource={jest.fn()}
      setMainDetailObject={jest.fn()}
      displayValue={() => [[new Date('2021-01-01T00:00:00'), new Date('2021-01-02T00:00:00')]]}
      dataTarget="https://some-test-target.com"
      targetPayload={(value: string) => ({ testPayload: value })}
      notifier={testNotifier}
      provider={testProvider}
      viewType="test_view"
      style={{}}
      setInitialValue={jest.fn()}
      submitChange={submitChangeMock}
      containerStore={mockedEffectorContainerStore}
      {...props}
    />
  </ChakraProvider>
)

Source File: App.tsx From engine with MIT License

5 votes

App: view = ({
  data = observe.structure.data,
  viewsCount = observe.structure.count.views,
  producersCount = observe.structure.count.producers,
}) => {
  if (!data || !viewsCount || !producersCount) {
    return;
  }

  return (
    <ChakraProvider>
      <SimpleGrid columns={2}>
        <Box bg="gray.100" h="100vh">
          <Tabs>
            <TabList position="relative">
              <Tab>State</Tab>
              <Tab>
                Views <Tag>{viewsCount}</Tag>
              </Tab>
              <Tab>
                Producers <Tag>{producersCount}</Tag>
              </Tab>
              <Tab>Stats</Tab>
            </TabList>
            <TabPanels>
              <TabPanel pr="0">
                <List>
                  <Box overflowY="scroll" h="92vh">
                    <StateTree data={data} />
                  </Box>
                </List>
              </TabPanel>
              <TabPanel pr="0">
                <ViewsTab />
              </TabPanel>
              <TabPanel pr="0">
                <ProducersTab />
              </TabPanel>
              <TabPanel pr="0">
                <StatsTab />
              </TabPanel>
            </TabPanels>
          </Tabs>
        </Box>
        <Box bg="gray.200" borderLeft="solid 1px" borderColor="gray.300">
          <EditElement />
          <ElementDescription />
        </Box>
      </SimpleGrid>
    </ChakraProvider>
  );
}

Source File: Button.test.tsx From ke with MIT License

5 votes

getComponent = (onClick: () => void, isDisabled?: boolean): JSX.Element => (
  <ChakraProvider>
    <Button isDisabled={isDisabled} onClick={onClick}>
      Test button
    </Button>
  </ChakraProvider>
)

Source File: App.tsx From takeout-app with MIT License

5 votes

App: React.FC<Props> = (_props) => {
  return (
    <ChakraProvider theme={theme}>
      <BrowserRouter>
        <Switch>
          <Route exact path="/">
            <Redirect to="/tracks/a" />
          </Route>

          <Route exact path="/session/new">
            {(() => {
              AttendeeEdit.preload();
              TrackPage.preload();
            })()}
            <Login />
          </Route>

          <Route exact path="/screen">
            <IntermissionScreen />
          </Route>

          <>
            <Navbar />
            <Route exact path="/attendee">
              {(() => {
                TrackPage.preload();
              })()}
              <AttendeeEdit />
            </Route>
            <Route exact path="/tracks/:slug">
              <TrackPage />
            </Route>

            <Route exact path="/control">
              <ControlRoot />
            </Route>
            <Route exact path="/control/attendees">
              <ControlAttendeesPage />
            </Route>
            <Route exact path="/control/attendees/:id">
              <ControlAttendeeEdit />
            </Route>
            <Route exact path="/control/track_cards">
              <ControlTrackCardsPage />
            </Route>
            <Route exact path="/control/session/new">
              <ControlLogin />
            </Route>
          </>
        </Switch>
      </BrowserRouter>
    </ChakraProvider>
  );
}

Source File: ThemeProvider.tsx From ke with MIT License

5 votes

ThemeProvider = ({ theme = defaultTheme, ...props }: ThemeProviderProps): JSX.Element => (
  <ChakraProvider {...props} theme={theme} />
)

Source File: _app.tsx From coindrop with GNU General Public License v3.0

5 votes

MyApp: FunctionComponent<AppProps> = ({ Component, pageProps }) => (
  <ChakraProvider theme={theme}>
      <DefaultSeo {...SEO} />
      <Component {...pageProps} />
  </ChakraProvider>
)

Source File: ShowAllCouponsBanner.tsx From fresh-coupons with GNU General Public License v3.0

5 votes

function ShowAllCouponsBanner() {
  return (
      <ChakraProvider theme={theme}>
        <Banner actionButton={<AllCoupons/>} bgColor="#5624d0" bannerContent={<BannerContent/>}/>
      </ChakraProvider>
  );
}

Source File: App.tsx From notebook with MIT License

5 votes

App: React.FC<AppComponentProps> = ({ history }) => {
  const [notes, setNotes] = React.useState<note[]>([]);

  React.useEffect(() => {
    const dummyNotes = [
      {
        id: "Odork5n5jPVd0wvm0w_dY",
        title: "Hey ?",
        body:
          "I'm dummy note here. Try to update me. Click me to see my remaining part. You can also delete me ?. But I'll be here again by reopening the app link ?. "
      }
    ];
    setNotes(dummyNotes);
  }, []);

  const handleNoteCreate = (note: note) => {
    const newNotesState: note[] = [...notes];
    newNotesState.push(note);
    setNotes(newNotesState);
    if (history.location.pathname !== "/") history.push("/");
  };

  return (
    <ChakraProvider theme={theme}>
      <Box textAlign="center" fontSize="xl" p={5}>
        <TopNav handleNoteCreate={handleNoteCreate} />
        <Switch>
          <Route exact path="/projects" component={RepositoriesList} />
          <Route
            exact
            path="/"
            component={() => <HomePage notes={notes} setNotes={setNotes} />}
          />
          <Redirect to="/" />
        </Switch>
        <PageFooter />
      </Box>
    </ChakraProvider>
  );
}

Source File: App.tsx From portfolio with MIT License

5 votes

App = () => (
  <ChakraProvider theme={theme} resetCSS={true}>
    <Layout />
  </ChakraProvider>
)

@chakra-ui/react#ChakraProvider TypeScript Examples