The second Mantine Extensions tutorial is about mantine-split-pane, the second most downloaded of my open-source React components for Mantine. A sidebar with a fixed width is never right for everyone: let people drag the divider instead. In under two minutes:
install it, and import its styles once
put two Split.Pane in a Split, with a Split.Resizer between them
give the first pane an initialWidth and let the second one grow (two panes that both grow won’t drag: I found out while filming)
minWidth and maxWidth stop the divider where you tell it to
variant=”gradient” and withKnob give it some colour and a handle
snapPoints snap it within 10 px, and a double-click resets both panes
Docs and live demos: gfazioli.github.io/mantine-split-pane
GitHub: gfazioli/mantine-split-pane
All the tutorials, in order: Mantine Extensions Tutorials
Which component should get the next one? Reply and tell me.
