@chakra-ui/react#ChakraProvider TypeScript Examples

The following examples show how to use @chakra-ui/react#ChakraProvider. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Chakra.tsx    From ksana.in with Apache License 2.0 6 votes vote down vote up 
export function Chakra({ cookies, children }: any) {
  const colorModeManager =
    typeof cookies === 'string' ? cookieStorageManager(cookies) : localStorageManager

  return (
    <ChakraProvider resetCSS colorModeManager={colorModeManager} theme={theme}>
      {children}
    </ChakraProvider>
  )
}
Example #2
Source File: WizardStepControlPanel.test.tsx    From ke with MIT License 6 votes vote down vote up 
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>
  )
}
Example #3
Source File: EventWelcome.tsx    From dope-monorepo with GNU General Public License v3.0 6 votes vote down vote up 
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>
    );
}
Example #4
Source File: index.tsx    From nextjs-hasura-boilerplate with MIT License 6 votes vote down vote up 
Layout: FC = ({ children }) => {
  return (
    <ChakraProvider theme={theme}>
      <Navbar />
      <Box maxW="xl" mx="auto" w="full" py={8}>
        {children}
      </Box>
    </ChakraProvider>
  );
}
Example #5
Source File: index.tsx    From ledokku with MIT License 6 votes vote down vote up 
ReactDOM.render(
  <React.StrictMode>
    <ApolloProvider client={apolloClient}>
      <ChakraProvider>
        <AuthProvider>
          <GlobalStyle />
          <BrowserRouter>
            <Router />
          </BrowserRouter>
        </AuthProvider>
      </ChakraProvider>
    </ApolloProvider>
  </React.StrictMode>,
  document.getElementById('root')
);
Example #6
Source File: _app.tsx    From eth-dapps-nextjs-boiletplate with MIT License 6 votes vote down vote up 
export default function App({ Component, pageProps }: AppProps) {
    return (
        <GlobalStore>
            <ChakraProvider>
                <Component {...pageProps} />
            </ChakraProvider>
        </GlobalStore>
    )
}
Example #7
Source File: _app.tsx    From lucide with ISC License 6 votes vote down vote up 
App = ({ Component, pageProps }) => {
  return (
    <>
      <Head>
        <title>Lucide</title>
      </Head>
      <ChakraProvider theme={customTheme}>
        <MobileNavigationProvider>
          <CustomizeIconContext>
            <Component {...pageProps} />
          </CustomizeIconContext>
        </MobileNavigationProvider>
      </ChakraProvider>
    </>
  );
}
Example #8
Source File: themeProvider.tsx    From wiregui with MIT License 6 votes vote down vote up 
export default function ThemeContainer({ children }: ThemeContainerProps) {
  return (
    <ChakraProvider theme={theme}>
      <ColorModeProvider options={{ initialColorMode: "dark" }}>
        <CSSReset />
        {children}
      </ColorModeProvider>
    </ChakraProvider>
  );
}
Example #9
Source File: _app.tsx    From next-crud with MIT License 6 votes vote down vote up 
App = ({ Component, pageProps }: AppProps) => {
  return (
    <QueryClientProvider client={queryClient}>
      <ChakraProvider resetCSS>
        <Component {...pageProps} />
      </ChakraProvider>
    </QueryClientProvider>
  )
}
Example #10
Source File: ComponentPreview.test.tsx    From openchakra with MIT License 6 votes vote down vote up 
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,
  }
}
Example #11
Source File: _app.tsx    From website with MIT License 6 votes vote down vote up 
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>
  )
}
Example #12
Source File: Chakra.tsx    From coindrop with GNU General Public License v3.0 6 votes vote down vote up 
Chakra: FunctionComponent<Props> = ({ cookies, children }) => {
  const colorModeManager = typeof cookies === "string" ? cookieStorageManager(cookies) : localStorageManager;
  return (
      <ChakraProvider
        colorModeManager={colorModeManager}
        theme={theme}
      >
        {children}
      </ChakraProvider>
  );
}
Example #13
Source File: App.tsx    From calories-in with MIT License 6 votes vote down vote up 
function App() {
  const [foods] = useState(loadFoods)

  return (
    <ChakraProvider theme={theme}>
      <ScreenSizeProvider>
        <OneTimeCheckStoreProvider>
          <PortionsStoreProvider>
            <FoodsStoreProvider initialFoods={foods}>
              <MainLayout>
                <DietEditor />
              </MainLayout>
            </FoodsStoreProvider>
          </PortionsStoreProvider>
        </OneTimeCheckStoreProvider>
      </ScreenSizeProvider>
    </ChakraProvider>
  )
}
Example #14
Source File: index.tsx    From phonepare with MIT License 6 votes vote down vote up 
ReactDOM.render(
  <React.StrictMode>
    <RecoilRoot>
      <ChakraProvider>
        <App />
      </ChakraProvider>
    </RecoilRoot>
  </React.StrictMode>,
  document.getElementById('root'),
)
Example #15
Source File: RenderDetail.test.tsx    From ke with MIT License 6 votes vote down vote up 
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)
})
Example #16
Source File: index.tsx    From bluebubbles-server with Apache License 2.0 6 votes vote down vote up 
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')
);
Example #17
Source File: app.tsx    From video-chat with MIT License 6 votes vote down vote up 
export default function App(){
  return (
    <ChakraProvider>
      <StoreProvider>
        <Router/>
        <ToastContainer/>
      </StoreProvider>
    </ChakraProvider>
  )
}
Example #18
Source File: CourseDetailsPage.tsx    From fresh-coupons with GNU General Public License v3.0 6 votes vote down vote up 
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>
  );
}
Example #19
Source File: test-utils.tsx    From jsonschema-editor-react with Apache License 2.0 6 votes vote down vote up 
AllProviders = ({ children }: { children?: React.ReactNode }) => (
  <ChakraProvider theme={theme}>{children}</ChakraProvider>
)
Example #20
Source File: FullPageSpinner.test.tsx    From rari-dApp with GNU Affero General Public License v3.0 6 votes vote down vote up 
test("renders spinner", async () => {
  render(
    <ChakraProvider>
      <FullPageSpinner />
    </ChakraProvider>
  );

  expect(screen.getByTestId("full-page-spinner")).toBeInTheDocument();
});
Example #21
Source File: DateTimeRangeListWidget.test.tsx    From ke with MIT License 6 votes vote down vote up 
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>
)
Example #22
Source File: App.tsx    From engine with MIT License 5 votes vote down vote up 
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>
  );
}
Example #23
Source File: Button.test.tsx    From ke with MIT License 5 votes vote down vote up 
getComponent = (onClick: () => void, isDisabled?: boolean): JSX.Element => (
  <ChakraProvider>
    <Button isDisabled={isDisabled} onClick={onClick}>
      Test button
    </Button>
  </ChakraProvider>
)
Example #24
Source File: App.tsx    From takeout-app with MIT License 5 votes vote down vote up 
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>
  );
}
Example #25
Source File: ThemeProvider.tsx    From ke with MIT License 5 votes vote down vote up 
ThemeProvider = ({ theme = defaultTheme, ...props }: ThemeProviderProps): JSX.Element => (
  <ChakraProvider {...props} theme={theme} />
)
Example #26
Source File: _app.tsx    From coindrop with GNU General Public License v3.0 5 votes vote down vote up 
MyApp: FunctionComponent<AppProps> = ({ Component, pageProps }) => (
  <ChakraProvider theme={theme}>
      <DefaultSeo {...SEO} />
      <Component {...pageProps} />
  </ChakraProvider>
)
Example #27
Source File: ShowAllCouponsBanner.tsx    From fresh-coupons with GNU General Public License v3.0 5 votes vote down vote up 
function ShowAllCouponsBanner() {
  return (
      <ChakraProvider theme={theme}>
        <Banner actionButton={<AllCoupons/>} bgColor="#5624d0" bannerContent={<BannerContent/>}/>
      </ChakraProvider>
  );
}
Example #28
Source File: App.tsx    From notebook with MIT License 5 votes vote down vote up 
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>
  );
}
Example #29
Source File: App.tsx    From portfolio with MIT License 5 votes vote down vote up 
App = () => (
  <ChakraProvider theme={theme} resetCSS={true}>
    <Layout />
  </ChakraProvider>
)