const Layout = ({children, path}) => { const showSidebar = IS_STATIC || path.match(/cli-commands|configuring-npm|using-npm/) return ( <ThemeProvider theme={theme}> <Navbar /> <Flex w={1}> {showSidebar && <Sidebar />} <Box width={1}>{children}</Box> </Flex> </ThemeProvider> ) }
render() { if (this.props.location.pathname === "apidocs") { // The other app manages apidocs this.props.location.reload(); } const { children } = this.props; return ( <div> <Helmet> <title>{`${config.siteTitle} | ${this.getLocalTitle()}`}</title> <meta name="description" content={config.siteDescription} /> </Helmet> <ThemeProvider theme={theme}> {children()} </ThemeProvider> </div> ); }
const App = ({ children, theme }: Props) => { const themeName = !themeList[theme] ? 'main' : theme; if (!themeList[themeName].helper) themeList[themeName].helper = color; if (process.env.OFFLINE_SUPPORT && process.browser && !offlineInstalled) { const OfflinePlugin = require('offline-plugin/runtime'); // eslint-disable-line global-require OfflinePlugin.install({ onUpdateReady() { OfflinePlugin.applyUpdate(); }, onUpdated() { window.location.reload(); } }); offlineInstalled = true; } return ( <ThemeProvider theme={themeList[themeName]}> <ThemedApp> <GlobalStyle /> {children} </ThemedApp> </ThemeProvider> ); }
<ThemeProvider theme={slidesTheme}> <Component {...pageProps} /> </ThemeProvider> <ThemeProvider theme={theme}> <Component {...pageProps} /> </ThemeProvider> <ThemeProvider theme={theme}> <NotFound routeMap={{}} /> </ThemeProvider> <ThemeProvider theme={theme}>
it("Render CardButton, matches snapshot", () => { const element = shallow( <ThemeProvider theme={APP_THEME}> <CardButton /> </ThemeProvider> ) expect(element).toMatchSnapshot() })
React.memo(({ children }) => { const getCurrentTheme = () => String(localStorage.getItem("dark-theme")) === "true"; const [darkActive, toggle] = useState(getCurrentTheme()); const [theme, setTheme] = useState(light); return ( <ThemeContext.Provider value={{ setTheme, theme, darkActive, toggle }}> <ThemeProvider theme={theme}>{children}</ThemeProvider> </ThemeContext.Provider> ); })
const AppRoot = () => { return ( <ThemeProvider theme={{ primaryColor: '#00A854' }}> <Router> <> <Route path="/" exact component={Home} /> <Route path="/tasks" component={TaskListPage} /> </> </Router> </ThemeProvider> ) }
describe('Divider', () => { it('renders without crashing', () => { const div = document.createElement('div'); ReactDOM.render( <ThemeProvider theme={scTheme}> <Divider /> </ThemeProvider>, div, ); }); });
const renderWithTheme = (props = {}, theme) => render( <ThemeProvider theme={theme || themes.light}> <LoadingIndicator {...props} /> </ThemeProvider>, )
render() { return ( <ThemeProvider theme={theme}> <StyledPage> <Meta /> <Header /> <Inner>{this.props.children}</Inner> </StyledPage> </ThemeProvider> ); }
export function shallowWithTheme(Component: Node) { return shallow<Node>( <ThemeProvider theme={theme}>{Component}</ThemeProvider> ); }
const renderLogos = theme => render( <ThemeProvider theme={theme}> <Logos /> </ThemeProvider>, )
it("Render CardIntegrated, matches snapshot", () => { const element = shallow( <ThemeProvider theme={APP_THEME}> <CardIntegrated /> </ThemeProvider> ) expect(element).toMatchSnapshot() })
it("Render NavItem, matches snapshot", () => { const element = shallow( <ThemeProvider theme={APP_THEME}> <NavItem /> </ThemeProvider> ) expect(element).toMatchSnapshot() })
it("Render ProfileButton, matches snapshot", () => { const element = shallow( <ThemeProvider theme={APP_THEME}> <ProfileButton /> </ThemeProvider> ) expect(element).toMatchSnapshot() })