recoil#RecoilRoot JavaScript Examples

The following examples show how to use recoil#RecoilRoot. 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: App.js    From React-Messenger-App with MIT License 6 votes vote down vote up 
App = () => {
  const [theme, toggleTheme] = useTheme(savedTheme);
  return (
    <div className="App">
      <ThemeContext.Provider value={{ theme, toggleTheme }}>
        <RecoilRoot>
          <RecoilLogger />
          <Home />
        </RecoilRoot>
      </ThemeContext.Provider>
    </div>
  );
}
Example #2
Source File: index.test.js    From basis with MIT License 6 votes vote down vote up 
describe("Playground", () => {
  it("loads successfully", () => {
    expect(() => {
      render(
        <RecoilRoot>
          <Playground />
        </RecoilRoot>
      );
    }).not.toThrow();
  });
});
Example #3
Source File: App.jsx    From web-frontend with MIT License 6 votes vote down vote up 
App = ({
  Component,
  pageProps,
  apolloCache,
  apolloClient = createApolloClient(apolloCache),
}) => (
  <ApolloProvider client={apolloClient}>
    <RecoilRoot>
      <Main>
        <Header />
        <Body />
      </Main>
    </RecoilRoot>
  </ApolloProvider>
)
Example #4
Source File: App.js    From react-builder with GNU General Public License v3.0 6 votes vote down vote up 
App = () => {
  const [theme, toggleTheme] = useTheme(savedTheme);
  return (
    <div className="App">
      <ThemeContext.Provider value={{ theme, toggleTheme }}>
        <RecoilRoot>
          <RecoilLogger />
          <Home />
        </RecoilRoot>
      </ThemeContext.Provider>
    </div>
  );
}
Example #5
Source File: App.jsx    From airboardgame with MIT License 6 votes vote down vote up 
App = () => {
  return (
    <Suspense fallback={<Waiter message={"Loading…"} />}>
      <RecoilRoot>
        <QueryClientProvider client={queryClient}>
          <Router>
            <MainRoute />
          </Router>
        </QueryClientProvider>
      </RecoilRoot>
      <ToastContainer
        position="top-center"
        autoClose={3000}
        hideProgressBar={false}
        newestOnTop
        closeOnClick
        rtl={false}
        pauseOnFocusLoss
        draggable
        pauseOnHover
      />
      <div id="panel-container" />
      <div id="modal-container" />
    </Suspense>
  );
}
Example #6
Source File: index.js    From app-personium-trails with Apache License 2.0 6 votes vote down vote up 
ReactDOM.render(
  <Router history={history}>
    <RecoilRoot>
      <PersoniumAppWrapper>
        <App />
      </PersoniumAppWrapper>
    </RecoilRoot>
  </Router>,
  document.getElementById('root')
);
Example #7
Source File: index.js    From HealthBridge with GNU General Public License v3.0 6 votes vote down vote up 
ReactDOM.render(
	<React.StrictMode>
		<RecoilRoot>
			<RecoilLogger />
			<App />
		</RecoilRoot>
	</React.StrictMode>,
	document.getElementById("root")
);
Example #8
Source File: App.js    From minecraft-react with MIT License 6 votes vote down vote up 
App = () => (
  <Canvas shadowMap sRGB gl={{ alpha: false }}>
    <RecoilRoot>
      <Camera />
      <Sky sunPosition={new Vector3(100, 10, 100)} />
      <ambientLight intensity={0.3} />
      <pointLight castShadow intensity={0.8} position={[100, 100, 100]} />
      <Physics gravity={[0, -30, 0]}>
        <Ground />
        <Player />
        <Cubes />
      </Physics>
    </RecoilRoot>
  </Canvas>
)
Example #9
Source File: App.js    From recoil-paint with MIT License 5 votes vote down vote up 
function App() {
  return (
    <RecoilRoot>
      <Main />
    </RecoilRoot>
  );
}
Example #10
Source File: index.js    From react-recoil-jwt-authentication-example with MIT License 5 votes vote down vote up 
ReactDOM.render(
    <React.StrictMode>
        <RecoilRoot>
            <App />
        </RecoilRoot>
    </React.StrictMode>,
    document.getElementById('app')
);
Example #11
Source File: index.js    From recoil-testing with MIT License 5 votes vote down vote up 
ReactDOM.render(
  <RecoilRoot>
    <RecoilizeDebugger nodes={nodes} root={root} />
    <App id="char-containter" />
  </RecoilRoot>,

  document.getElementById('root')
);
Example #12
Source File: Page.js    From basis with MIT License 4 votes vote down vote up 
function Page({ pageContext, children }) {
  const { header, status, layout = "default" } = pageContext;
  const title = header ? `${header} | Basis` : "Basis";

  return (
    <RecoilRoot>
      <BasisProvider theme={theme} InternalLink={GatsbyLink}>
        <Global
          styles={{
            body: {
              margin: 0,
              fontFamily: theme.fonts.body,
              fontSize: theme.fontSizes[1],
              lineHeight: theme.lineHeights[2],
              color: theme.colors.black,
            },
            a: {
              color: "inherit",
              textDecoration: "none",
            },
            ":focus": {
              outline: 0,
            },
            '[data-basis-keyboard-mode="true"] :not([aria-invalid="true"]):focus': {
              boxShadow: `0 0 0px ${theme.radii[1]} ${theme.colors.secondary.lightBlue.t80}`,
            },
          }}
        />
        <SEO title={title} />
        <Splitbee />
        {layout === "empty" ? (
          <main>{children}</main>
        ) : (
          <div
            css={{
              height: "100vh",
              display: "grid",
              gridTemplateColumns: "224px 1fr",
            }}
          >
            <Sidebar />
            <main
              css={{
                minHeight: 0,
                display: "flex",
                flexDirection: "column",
                overflow: "auto",
              }}
            >
              {header && (
                <div
                  css={{
                    borderBottom: `1px solid ${theme.colors.grey.t16}`,
                  }}
                >
                  <div
                    css={{
                      display: "flex",
                      padding: `${theme.space[5]} ${theme.space[6]} 0`,
                    }}
                  >
                    <Text as="h1" textStyle="heading4">
                      {header}
                    </Text>
                    {status && (
                      <Container margin="0 0 0 9">
                        <ComponentStatusIndicator status={status} />
                      </Container>
                    )}
                    <FeedbackFish projectId="42362f272b4510">
                      <div css={{ marginLeft: "auto" }}>
                        <Button variant="secondary">Feedback</Button>
                      </div>
                    </FeedbackFish>
                  </div>
                  <Location>
                    {({ location }) => {
                      const urls = getTabsUrls(location);

                      return (
                        <ul
                          css={{
                            display: "flex",
                            margin: `${theme.space[6]} 0 0`,
                            padding: 0,
                          }}
                        >
                          {urls.map(({ name, href, isCurrent }) => (
                            <li
                              css={{
                                listStyleType: "none",
                                color: isCurrent
                                  ? theme.colors.black
                                  : theme.colors.grey.t65,
                                ...(isCurrent && {
                                  "::after": {
                                    content: "''",
                                    display: "block",
                                    height: theme.borderWidths[1],
                                    margin: `0 ${theme.space[6]}`,
                                    backgroundColor: theme.colors.black,
                                  },
                                }),
                              }}
                              key={name}
                            >
                              <GatsbyLink
                                css={{
                                  display: "flex",
                                  alignItems: "center",
                                  boxSizing: "border-box",
                                  width: "100%",
                                  padding: `${theme.space[2]} ${theme.space[6]}`,
                                  color: isCurrent
                                    ? theme.colors.black
                                    : theme.colors.grey.t75,
                                }}
                                to={href}
                              >
                                {name}
                              </GatsbyLink>
                            </li>
                          ))}
                        </ul>
                      );
                    }}
                  </Location>
                </div>
              )}
              <div
                css={{
                  display: "flex",
                  flexDirection: "column",
                  flexGrow: 1,
                  minHeight: 0,
                  overflowY: "auto",
                }}
              >
                {children}
              </div>
            </main>
          </div>
        )}
      </BasisProvider>
    </RecoilRoot>
  );
}