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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
function App() {
return (
<RecoilRoot>
<Main />
</RecoilRoot>
);
}
Example #10
| Source File: index.js From react-recoil-jwt-authentication-example with MIT License | 5 votes |
|
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 |
|
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 |
|
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>
);
}
