How it renders
In the src/index.tsx file you can see date-fns
configuration going and just a simple ReactDOM.render()
function.
Every component is a functional component:
const App = (): React.ReactElement => {
const storeTheme = useSelector((state) => state.settings.theme)
const theme = createMuiTheme(storeTheme)
const classes = useStyles(theme)
// Set root classes
document.body.className = classes.root
return (
<ThemeProvider theme={theme}>
<Router>
{/** Restores user scroll */}
<ScrollRestoration />
{/** Change document title on routing */}
<RouterTitleChange />
<AppBar />
<div className={classes.app}>
<Tabs />
<AppRouter />
</div>
<Footer />
</Router>
</ThemeProvider>
)
}
export default App
We have some custom hooks in src/hooks
folder, if you want to create a new one, follow these instructions.
Custom hooks
Name
Description
useMediaExtendedQuery
Returns true if device viewport is wider than MIN_WIDTH
. Useful if you need to make some responsiveness inside the code. Use with caution of performance
useQuery
Gets query from page's URL
useRoute
Returns current route object. See config/routes.ts
for type declarations
useSelector
Custom wrapper for redux useSelector
hook
Last updated
Was this helpful?