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 MUI'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 = () => {
return (
<Page>
<BrowserRouter>
<Routes />
</BrowserRouter>
</Page>
);
};
export default App;© theFront. 2021, Maccarian. All rights reserved
When you visit or interact with our sites, services or tools, we or our authorised service providers may use cookies for storing information to help provide you with a better, faster and safer experience and for marketing purposes.