How do I make panels collapsible?

Add collapsible: true to the panel configuration in dataSource.

How do I set minimum panel sizes?

Use min property in panel config: { size: '200px', min: '100px', content: '...' }.

smart-ui

JavaScript

Angular

Vue

React

Getting Started with React Splitter Component

Smart UI React targets React 18+ and current Node LTS for tooling; use TypeScript templates when you want typed props and events.

Demo source (Smart UI repo): react/source/splitter/overview/App.jsx

1 Create a Vite + React + TypeScript app

npm create vite@latest my-smart-app -- --template react-ts

```
cd my-smart-app
```
then
```
npm install
```

2 Install Smart UI for React

npm install smart-webcomponents-react

3 Import styles and render the component

Open src/App.tsx (or App.jsx if you chose JavaScript). The snippet below matches Smart UI React demos for this widget:

import 'smart-webcomponents-react/source/styles/smart.default.css';
import './App.css';
import React from "react";
import { createRoot } from 'react-dom/client';
import { Splitter, SplitterItem } from 'smart-webcomponents-react/splitter';

const App = () => {
  // Called when the Splitter is ready
  const handleReady = () => {
    const container = document.getElementById('splitterContainer');
    if (!container) return;
    const root = createRoot(container);
    root.render(
      <Splitter>
        <SplitterItem size="33%" collapsible id="item1">Item 1</SplitterItem>
        <SplitterItem size="33%" id="item2">Item 2</SplitterItem>
        <SplitterItem collapsible id="item3">Item 3</SplitterItem>
      </Splitter>
    );
  };

  return (
    <div>
      <Splitter
        onReady={handleReady}
        orientation="horizontal"
        id="horizontalSplitter"
        dataSource={[
          {
            id: 'item0',
            size: '50%',
            content: '<div style="height: 100%;" id="splitterContainer"></div>'
          },
          {
            size: '25%',
            id: 'item4',
            content: 'Item 4',
          },
          {
            id: 'item5',
            content: 'Item 5'
          }
        ]}
      >
      </Splitter>
    </div>
  );
};

export default App;

4 Run the dev server

npm run dev

Open the URL Vite prints (often http://localhost:5173/).

Alternative: Next.js

Create an app with npx create-next-app@latest (Pages Router or App Router). Install the same package (npm install smart-webcomponents-react), then reuse the imports and default export from step 3 in pages/_app.tsx, the App Router root app/layout.tsx, or your top-level layout component so styles and the widget tree load once.

Common Use Cases

Set panel sizes

Configure initial panel dimensions

splitter.dataSource = [
  { size: '30%', content: 'Left Panel' },
  { size: '70%', content: 'Right Panel' }
];

Handle resize

Respond to panel size changes

splitter.addEventListener('resize', (e) => {
  console.log('New sizes:', e.detail);
});

Troubleshooting

How do I make panels collapsible?: Add collapsible: true to the panel configuration in dataSource.
How do I set minimum panel sizes?: Use min property in panel config: { size: '200px', min: '100px', content: '...' }.

TypeScript Support

Types ship with smart-webcomponents-react. Import the component and prop types:

import type { Splitter, SplitterProps } from 'smart-webcomponents-react/splitter';

The generated wrappers expose on* callbacks (for example onChange) whose arguments are standard DOM Event values unless the widget typings narrow them further.

Live demos

Supported stacks: Smart UI targets Angular 17+, React 18+, Vue 3+, Node 18 LTS, and evergreen browsers; pin exact package versions to your org policy.