In the documentation of Material UI, I found this code:
import React from 'react';
import PropTypes from 'prop-types';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import { makeStyles } from '@material-ui/styles';
import CssBaseline from '@material-ui/core/CssBaseline';
import useScrollTrigger from '@material-ui/core/useScrollTrigger';
import Box from '@material-ui/core/Box';
import Container from '@material-ui/core/Container';
import Fab from '@material-ui/core/Fab';
import KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';
import Zoom from '@material-ui/core/Zoom';
const useStyles = makeStyles((theme) => ({
root: {
position: 'fixed',
bottom: theme.spacing(2),
right: theme.spacing(2),
},
}));
function ScrollTop(children) {
const classes = useStyles();
const trigger = useScrollTrigger({
target: window ? window() : undefined,
disableHysteresis: true,
threshold: 100
});
const handleClick = (event) => {
const anchor = (event.target.ownerDocument || document).querySelector('#back-to-top-anchor');
if (anchor) {
anchor.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
};
return (<Zoom in={trigger}>
<div onClick={handleClick} role="presetation" className={classes.root}>
{children}
</div>
</Zoom>);
}
export default function BackToTop(children) {
return (
<React.Fragment>
<CssBaseline />
<AppBar>
<Toolbar>
<Typography variant="h6">Scroll to see button</Typography>
</Toolbar>
</AppBar>
<Toolbar id="back-to-top-anchor" />
<Container>
<Box my={2}>
{[...new Array(100)]
.map(
() => `Cras mattis consectetur purus sit amet fermentum.
Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et.`,
)
.join('\n')}
</Box>
</Container>
<ScrollTop {...children}>
<Fab color="secondary" size="small" aria-label="scroll back to top">
<KeyboardArrowUpIcon />
</Fab>
</ScrollTop>
</React.Fragment>
);
}
There was said that this code is top bar, which will draw Back to top
button. But I don't understand what should I pass as children
to BackToTop
function. Can anyone help me?
P.S Code also includes content, that is stored inside Box
element, it is just for testing. If I understand purpose of children
parameter right, I should have ability to make BackToTop
function independent of any parameters.