Advanced Manual

Dynamic Configuration

In real world application, different app has different needs and customization. In this page, we will see how we can customize layout config when the application run in client side.

Let’s say I have this layout configuration for my site.

Header is sticky for all breakpoints (>= xs) EdgeSidebar is temporary at xs and sm and then become permanent & collapsible at md and up

If you don’t understand what I’m talking about, please read these tutorials first

The requirement says that sidebar width can be controlled by a slider.

Builder inside React component

Because builder is a normal function and we want it to recalculate when some state changes, we need to move builder inside react component before the return function.

const Dashboard = () => {
  const scheme = Layout();  scheme.configureHeader(builder => {    builder      .registerConfig('xs', {        position: 'sticky',      })      .registerConfig('md', {        position: 'relative', // won't stick to top when scroll down      });  });  scheme.configureEdgeSidebar(builder => {    builder      .create('unique_id', { anchor: 'left' })      .registerPermanentConfig('xs', {        width: 200, // px, (%, rem, em is compatible)        collapsible: true,        collapsedWidth: 64,      });  });  return <Root scheme={scheme}>...</Root>;
};

Everything works same as before, the only difference is that if you put scheme builder inside react component, the scheme builder is called at every rerender. Usually this should not cause any performance downside due to power of react, but if you found some significant performance issue, feel free to open an issue.

Let’s add a slider and bind it to a state and replace sidebar’s width with that state.

// Dashboard is a react component
const Dashboard = () => {
  const [width, setWidth] = React.useState(256);  const scheme = Layout();

  scheme.configureHeader(builder => {
    builder
      .registerConfig('xs', {
        position: 'sticky',
      })
      .registerConfig('md', {
        position: 'relative', // won't stick to top when scroll down
      });
  });

  scheme.configureEdgeSidebar(builder => {
    builder
      .create('unique_id', { anchor: 'left' })
      .registerPermanentConfig('xs', {
        width: width, // use width from state        collapsible: true,
        collapsedWidth: 64,
      });
  });

  return (
    <Root scheme={scheme}>
      {({ state: { sidebar } }) => (
        <>
          ...
          <Content>
            <Container maxWidth="sm">
              <Box py={8}>
                <Slider                  min={200}                  max={400}                  value={width}                  onChange={(e, value) => setWidth(value)}                  step={20}                  valueLabelDisplay="on"                />              </Box>
            </Container>
          </Content>
          ...
        </>
      )}
    </Root>
  );
};

Finally, we will get the result like this (try slide the slider and you will see the width of sidebar changes in laptop breakpoint and up)

Done! Feel free to share your use case to me and I will put it in this website to help other people, thanks.