Skip to content

Simplify examples: white background, 1px splitter #854

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tomkp merged 1 commit into from
Dec 24, 2025
Merged

Simplify examples: white background, 1px splitter #854

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 14 additions & 57 deletions examples/BasicExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,89 +1,46 @@
import React, { useState, useEffect } from 'react';
import React, { useState } from 'react';
import { SplitPane, Pane } from '../src';

export function BasicExample() {
const [direction, setDirection] = useState<'horizontal' | 'vertical'>(
'horizontal'
);

// Default to vertical on mobile for better usability
useEffect(() => {
const isMobile = window.innerWidth <= 768;
if (isMobile) {
setDirection('vertical');
}
}, []);

return (
<div className="example-container">
<div className="example-info">
<div className="example-header">
<h2>Basic Split Pane</h2>
<p>
A simple two-pane layout.{' '}
<button
className="btn"
onClick={() =>
setDirection((d) =>
d === 'horizontal' ? 'vertical' : 'horizontal'
)
}
style={{
padding: '0.25rem 0.5rem',
marginLeft: '0.5rem',
background: '#e94560',
border: 'none',
borderRadius: '4px',
color: 'white',
cursor: 'pointer',
minHeight: '32px',
}}
>
{direction}
</button>
</p>
</div>
<div className="example-content">
<SplitPane direction={direction}>
<Pane
minSize={80}
defaultSize={direction === 'vertical' ? '40%' : '30%'}
>
<div className="pane-content sidebar">
<h2>Sidebar</h2>
<p>Min size: 80px. Drag the divider to resize.</p>
<div className="file-tree">
<div className="file-tree-item folder">src</div>
<div
className="file-tree-item file"
style={{ marginLeft: '1rem' }}
>
index.ts
</div>
<div
className="file-tree-item file"
style={{ marginLeft: '1rem' }}
>
App.tsx
</div>
<div className="file-tree-item folder">components</div>
<div className="file-tree-item folder">styles</div>
</div>
<Pane minSize={100} defaultSize="30%">
<div className="pane gray">
<h3>Left Pane</h3>
<p>minSize: 100px</p>
</div>
</Pane>
<Pane minSize={100}>
<div className="pane-content editor">
<h2>Main Content</h2>
<p>Use arrow keys when focused for keyboard control.</p>
<div className="code-block">
<div className="pane">
<h3>Right Pane</h3>
<p>Drag the divider to resize.</p>
<div className="code">
<code>
{`import { SplitPane, Pane } from 'react-split-pane';

<SplitPane direction="${direction}">
<Pane minSize={80}>
Sidebar
</Pane>
<Pane>
Main Content
</Pane>
{`<SplitPane direction="${direction}">
<Pane minSize={100}>Left</Pane>
<Pane>Right</Pane>
</SplitPane>`}
</code>
</div>
Expand Down
96 changes: 21 additions & 75 deletions examples/ControlledExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,98 +1,44 @@
import React, { useState, useEffect } from 'react';
import React, { useState } from 'react';
import { SplitPane, Pane } from '../src';

const STORAGE_KEY = 'split-pane-sizes';

export function ControlledExample() {
const [sizes, setSizes] = useState<number[]>(() => {
const saved = localStorage.getItem(STORAGE_KEY);
return saved ? JSON.parse(saved) : [300, 500];
});

useEffect(() => {
localStorage.setItem(STORAGE_KEY, JSON.stringify(sizes));
}, [sizes]);

const handleResize = (newSizes: number[]) => {
setSizes(newSizes);
};

const handleReset = () => {
setSizes([300, 500]);
};
const [sizes, setSizes] = useState<number[]>([200, 400]);

return (
<div className="example-container">
<div className="example-info">
<h2>Controlled + Persistent</h2>
<div className="example-header">
<h2>Controlled</h2>
<p>
Sizes are controlled via state and persisted to localStorage. Refresh
to see persistence.
<button
onClick={handleReset}
style={{
padding: '0.25rem 0.5rem',
marginLeft: '0.5rem',
background: '#e94560',
border: 'none',
borderRadius: '4px',
color: 'white',
cursor: 'pointer',
}}
>
Sizes are controlled via state.{' '}
<button className="btn" onClick={() => setSizes([200, 400])}>
Reset
</button>
</p>
</div>
<div className="example-content">
<SplitPane direction="horizontal" onResize={handleResize}>
<Pane size={sizes[0]} minSize={150}>
<div className="pane-content sidebar">
<h2>Panel A</h2>
<p>This pane's size is controlled.</p>
<div className="size-display">
Width: {Math.round(sizes[0])}px
</div>
<div className="code-block" style={{ marginTop: '1rem' }}>
<SplitPane direction="horizontal" onResize={setSizes}>
<Pane size={sizes[0]} minSize={100}>
<div className="pane gray">
<h3>Panel A</h3>
<p className="size-display">{Math.round(sizes[0])}px</p>
</div>
</Pane>
<Pane size={sizes[1]} minSize={100}>
<div className="pane">
<h3>Panel B</h3>
<p className="size-display">{Math.round(sizes[1])}px</p>
<div className="code">
<code>
{`const [sizes, setSizes] = useState([300, 500]);
{`const [sizes, setSizes] = useState([200, 400]);

<SplitPane onResize={setSizes}>
<Pane size={sizes[0]}>
Panel A
</Pane>
<Pane size={sizes[1]}>
Panel B
</Pane>
<Pane size={sizes[0]}>A</Pane>
<Pane size={sizes[1]}>B</Pane>
</SplitPane>`}
</code>
</div>
</div>
</Pane>
<Pane size={sizes[1]} minSize={200}>
<div className="pane-content editor">
<h2>Panel B</h2>
<p>Sizes are saved to localStorage on every change.</p>
<div className="size-display">
Width: {Math.round(sizes[1])}px
</div>
<div
style={{
marginTop: '1rem',
padding: '1rem',
background: '#16213e',
borderRadius: '4px',
}}
>
<h3 style={{ fontSize: '0.9rem', marginBottom: '0.5rem' }}>
localStorage
</h3>
<code style={{ fontSize: '0.8rem', color: '#8be9fd' }}>
{STORAGE_KEY}: {JSON.stringify(sizes.map(Math.round))}
</code>
</div>
</div>
</Pane>
</SplitPane>
</div>
</div>
Expand Down
86 changes: 14 additions & 72 deletions examples/NestedExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,88 +1,30 @@
import React, { useState, useEffect } from 'react';
import React from 'react';
import { SplitPane, Pane } from '../src';

export function NestedExample() {
const [isMobile, setIsMobile] = useState(false);

useEffect(() => {
setIsMobile(window.innerWidth <= 768);
}, []);

return (
<div className="example-container">
<div className="example-info">
<div className="example-header">
<h2>Nested Split Panes</h2>
<p>Create complex layouts by nesting split panes. IDE-style layout.</p>
<p>Create complex layouts by nesting split panes.</p>
</div>
<div className="example-content">
<SplitPane direction={isMobile ? 'vertical' : 'horizontal'}>
<Pane minSize={80} defaultSize={isMobile ? '30%' : 200}>
<div className="pane-content sidebar">
<h2>Explorer</h2>
<div className="file-tree">
<div className="file-tree-item folder">react-split-pane</div>
<div
className="file-tree-item folder"
style={{ marginLeft: '1rem' }}
>
src
</div>
<div
className="file-tree-item file"
style={{ marginLeft: '2rem' }}
>
index.ts
</div>
<div
className="file-tree-item file"
style={{ marginLeft: '2rem' }}
>
SplitPane.tsx
</div>
<div
className="file-tree-item file"
style={{ marginLeft: '2rem' }}
>
Pane.tsx
</div>
</div>
<SplitPane direction="horizontal">
<Pane minSize={100} defaultSize={200}>
<div className="pane gray">
<h3>Sidebar</h3>
</div>
</Pane>
<Pane minSize={100}>
<Pane minSize={200}>
<SplitPane direction="vertical">
<Pane minSize={60}>
<div className="pane-content editor">
<h2>Editor</h2>
<div className="code-block">
<code>
{`export function SplitPane(props) {
const {
direction = 'horizontal',
children,
} = props;

return (
<div className={className}>
{renderChildren()}
</div>
);
}`}
</code>
</div>
<Pane minSize={100}>
<div className="pane">
<h3>Main</h3>
</div>
</Pane>
<Pane minSize={50} defaultSize={isMobile ? 80 : 150}>
<div className="pane-content console">
<h2>Terminal</h2>
<div style={{ marginTop: '0.5rem', fontSize: '0.75rem' }}>
<div style={{ color: '#50fa7b' }}>$ npm test</div>
<div style={{ color: '#888', marginTop: '0.25rem' }}>
✓ 14 tests passed
</div>
<div style={{ color: '#50fa7b', marginTop: '0.25rem' }}>
All tests passed
</div>
</div>
<Pane minSize={80} defaultSize={150}>
<div className="pane gray">
<h3>Panel</h3>
</div>
</Pane>
</SplitPane>
Expand Down
41 changes: 41 additions & 0 deletions examples/PercentageExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import React from 'react';
import { SplitPane, Pane } from '../src';

export function PercentageExample() {
return (
<div className="example-container">
<div className="example-header">
<h2>Percentage Sizes</h2>
<p>Use percentage values for responsive layouts.</p>
</div>
<div className="example-content">
<SplitPane direction="horizontal">
<Pane defaultSize="25%">
<div className="pane gray">
<h3>25%</h3>
</div>
</Pane>
<Pane defaultSize="50%">
<div className="pane">
<h3>50%</h3>
<div className="code">
<code>
{`<SplitPane>
<Pane defaultSize="25%">A</Pane>
<Pane defaultSize="50%">B</Pane>
<Pane defaultSize="25%">C</Pane>
</SplitPane>`}
</code>
</div>
</div>
</Pane>
<Pane defaultSize="25%">
<div className="pane gray">
<h3>25%</h3>
</div>
</Pane>
</SplitPane>
</div>
</div>
);
}
Loading
Loading