@chakra-ui/core#ThemeProvider JavaScript Examples

The following examples show how to use @chakra-ui/core#ThemeProvider. 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: index.js    From here-covid-19-tracker with MIT License 6 votes vote down vote up 
Layout = ({ children }) => {
  return (
    <ThemeProvider theme={theme}>
      <CSSReset />
      <Global styles={globalStyles} />
      {children}
    </ThemeProvider>
  )
}
Example #2
Source File: index.js    From space-rockets-challenge with MIT License 6 votes vote down vote up 
ReactDOM.render(
  <React.StrictMode>
    <Router>
      <ThemeProvider>
        <CSSReset />
        <App />
      </ThemeProvider>
    </Router>
  </React.StrictMode>,
  document.getElementById("root")
);
Example #3
Source File: App.js    From allay-fe with MIT License 5 votes vote down vote up 
App = ({ size }) => {
  const location = useLocation()

  // check for admin

  useEffect(() => {
    initializeAnalytics()
  }, [location])
  // ==>  STEP 2  <==
  // if (size.width > 850) {
  return (
    <ThemeProvider theme={customTheme}>
      <div className="App">
        <Switch>
          <Route exact path="/" component={Login} />
          <Route path="/signup" component={Signup} />

          <PrivateRoute exact path="/profile/:id" component={ProfilePage} />
          <PrivateRoute
            exact
            path="/profile/:id/edit"
            component={EditUserProfile}
          />
          <PrivateRoute exact path="/dashboard" component={DashboardHome} />
          <PrivateRoute
            path="/dashboard/add-review"
            component={FormController}
          />
          <PrivateRoute
            path="/dashboard/review/:id"
            component={EditReviewForm}
          />
          <PrivateRoute
            path="/dashboard/interview/:id"
            component={EditInterviewForm}
          />
          <PrivateRoute path="/add-company" component={AddCompanyForm} />
        </Switch>
      </div>
    </ThemeProvider>
  )
  // ==>   STEP 3 <==
  // } else {
  //   return <h1>Working on mobile version, please use larger screen for now.</h1>
  // }
}
Example #4
Source File: index.js    From covid-alert with Apache License 2.0 5 votes vote down vote up 
ReactDOM.render(
  <ThemeProvider theme={theme}>
    <CSSReset />
    <App />
  </ThemeProvider>,
  document.getElementById('root')
);
Example #5
Source File: App.js    From CubeMail with MIT License 4 votes vote down vote up 
App = () => {
  const [isAuthorize, setIsAuthorize] = useState(false);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    setLoading(true);

    const initialGoogleConnection = async () => {
      await window.gapi.load("client:auth2", {
        callback: () => {
          // Handle gapi.client initialization.
          window.gapi.client.setApiKey(process.env.REACT_APP_API_KEY);
          window.gapi.auth.authorize(
            {
              client_id: process.env.REACT_APP_CLIENT_ID,
              scope: process.env.REACT_APP_SCOPES,
              immediate: true,
            },
            handleAuthResult
          );
        },
        onerror: function () {
          // Handle loading error.
          console.log("gapi.client failed to load!");
        },
        timeout: 5000, // 5 seconds.
        ontimeout: function () {
          // Handle timeout.
          console.log("gapi.client could not load in a timely manner!");
        },
      });
    };

    try {
      initialGoogleConnection();
    } catch (error) {
      console.log("error: ", error);
    }

    setLoading(false);
    // eslint-disable-next-line
  }, []);

  const handleAuthResult = (authResult) => {
    if (authResult && !authResult.error) {
      console.log("Sign-in successful");
      // setIsAuthorize(true);
      loadClient();
    } else {
      console.error("handleAuthResult...");
      console.error(authResult);
    }
    setLoading(false);
  };

  const handleAuthClick = () => {
    setLoading(true);
    return window.gapi.auth.authorize(
      {
        client_id: process.env.REACT_APP_CLIENT_ID,
        scope: process.env.REACT_APP_SCOPES,
        immediate: false,
      },
      handleAuthResult
    );
  };

  const loadClient = () => {
    return window.gapi.client.load("gmail", "v1").then(
      (res) => {
        console.log("gapi client loaded for API");
        setIsAuthorize(true);
        // getMessages();
      },
      (err) => {
        console.error("Error loading window.gapi client for API", err);
      }
    );
  };

  return (
    <EmailState>
      <ThemeProvider>
        <CSSReset />
        {isAuthorize ? (
          <Main />
        ) : (
          <SignIn loading={loading} handleAuthClick={handleAuthClick} />
        )}
      </ThemeProvider>
    </EmailState>
  );
}