Page component
The "Page" component decraration is inside src/components/Page.js
The "Page" component is the bootstrap point of the whole app and the parent component of the views and pages.
The declaration of the useDarkMode
hook, the initialization of the AOS
plugin and UI-Demo's ThemeProvider
are in the "Page" component.
import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import { ThemeProvider } from '@mui/material/styles';
import Paper from '@mui/material/Paper';
import CssBaseline from '@mui/material/CssBaseline';
import getTheme from 'theme';
import AOS from 'aos';
export const useDarkMode = () => {
...
[The hook logic]
...
return [themeMode, themeToggler, mountedComponent];
};
export default function Page({ children }) {
React.useEffect(() => {
// Remove the server-side injected CSS.
const jssStyles = document.querySelector('#jss-server-side');
if (jssStyles) {
jssStyles.parentElement.removeChild(jssStyles);
}
AOS.init({
once: true,
delay: 50,
duration: 500,
easing: 'ease-in-out',
});
}, []);
const [themeMode, themeToggler, mountedComponent] = useDarkMode();
useEffect(() => {
AOS.refresh();
}, [mountedComponent, themeMode]);
return (
<ThemeProvider theme={getTheme(themeMode, themeToggler)}>
{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
<CssBaseline />
<Paper elevation={0}>{children}</Paper>
</ThemeProvider>
);
}
Page.propTypes = {
children: PropTypes.node.isRequired,
};
Example of the use of the Page component
import React from 'react';
...
[Other components import]
...
import Page from './components/Page';
const App = (): JSX.Element => {
return (
<Page>
<BrowserRouter>
<Routes />
</BrowserRouter>
</Page>
);
};
export default App;