SlipStack

Beautiful, sliding, stacking panes for React.

Installation

``bash
npm i slipstack-react
`

Quick-start

`tsx
import { SlipStackContainer, SlipStackPaneData } from "slipstack-react";

const initial: SlipStackPaneData[] = [
{
id: "home",
title: "Home",
element: ({openPane}) => (
openPane({
id: "details",
title: "Details",
element:

Details pane

})}>
Open details

)
}
];

function App() {
return ;
}
`

Alternatively, you can use React imperative to navigate with the container.

`tsx
import { useRef } from "react";
import { SlipStackContainer, SlipStackHandle } from "slipstack-react";

const ref = useRef(null);

;

// open another pane programmatically
ref.current?.openPane({
id: "settings",
title: "Settings",
element:

,
});
`

Example app

Run the demo application from the example folder:

`bash
cd example
npm install
npm dev
`

API

$3

| Prop | Type | Default | Description |
|-------------|-----------------------|---------|----------------------------------------|
| paneData | SlipStackPaneData[] | – | Panes shown when the component mounts. |
| paneWidth | number | 380 | Maximum width of each pane. |

$3

`ts
import { SlipStackPaneRenderer } from "./SlipStackPane";

interface SlipStackPaneData {
id: string;
title: string;
element: ReactNode | SlipStackPaneRenderer;
}
`

$3


`ts
type SlipStackPaneRenderer = (args: {
openPane: (next: SlipStackPaneData) => void;
}) => ReactNode;
`

$3

Returned when you attach ref to the container.

| Method | Description |
|------------|---------------------------------------------------|
| openPane | openPane(next: SlipStackPaneData): void  — programmatically open or navigate to next. |

Calling openPane(next) appends next to the right of the calling pane and removes any panes that were further right.

Behaviour

• Every pane is rendered with a fixed width
maxWidth = min(paneWidth, viewportWidth) – they are never shrunk below this value.
• If the total width of visible panes exceeds the viewport, the container
converts the left-most panes into 40 px vertical tabs and/or horizontally
scrolls the sliding track to keep everything accessible.
• openPane(next) appends (or navigates to) next, recomputes the layout,
and scrolls the new pane into view. The same openPane reference is passed
to every SlipStackPaneRenderer.

Contributing

PRs and issues are welcome. Run the dev setup with:

`bash
npm install
npm test
``

Acknowledgements

This project’s horizontally tiled-pane interaction model is inspired by
Andy Matuschak’s working notes.

License

MIT