Handle Split Views like it's 2022

Live demo

Nowadays, split views are everywhere, and yet it looked like there wasn't a great one, with an easy-to-use API, for React -- so we made one. We've fetched great inspiration from the Visual Studio Code split views. They're discrete, and they feel great.

🐥 Tiny ~4.7kb

🐼 Written in TypeScript

🦁 Use standard CSS properties to customize the SplitView and it's views

🦄 A simple, easy-to-use API, and a beautiful SplitView! No redundancy! All hail the unicorns!

TypeScript-lovers notice: All type declarations are included in the package. No need to install @types.

Installation

npm i react-better-splitviews
// OR
yarn add react-better-splitviews

and

import { SplitView } from "react-better-splitviews";

Examples

There are 2 orientations you can use for your SplitView: rows or columns.

1. Rows (default)

import { SplitView } from "react-better-splitviews";

const CustomComponent = () => {
  return (
    <SplitView style={{ height: "500px" }}>
      <div>First View</div>
      <div>Second View</div>
      <div>Third View</div>
    </SplitView>
  );
};

With constraints

import { SplitView } from "react-better-splitviews";

const CustomComponent = () => {
  return (
    <SplitView style={{ height: "500px" }}>
      {/* Width will start at 10 pixels */}
      <div style={{ width: "10px" }}>First View</div>

      {/*
        Width will start at 50% of the SplitView's 
        It can't be shrunk under 110 pixels
      */}
      <div style={{ width: "50%", minWidth: 110 }}>Second View</div>

      {/* 
        Width will take all remaining space 
        It can't be shrunk under 100 pixels
        It can't be stretched above 300 pixels
      */}
      <div style={{ minWidth: 100, maxWidth: 300 }}>Third View</div>
    </SplitView>
  );
};

2. Columns

import { SplitView } from "react-better-splitviews";

const CustomComponent = () => {
  return (
    <SplitView style={{ height: "500px" }} direction="column">
      <div>First View</div>
      <div>Second View</div>
      <div>Third View</div>
    </SplitView>
  );
};

With constraints

import { SplitView } from "react-better-splitviews";

const CustomComponent = () => {
  return (
    <SplitView style={{ height: "500px" }} direction="column">
      {/* Height will start at 10 pixels */}
      <div style={{ height: "10px" }}>First View</div>

      {/*
        Height will start at 50% of the SplitView's 
        It can't be shrunk under 110 pixels
      */}
      <div style={{ height: "50%", minHeight: 110 }}>Second View</div>

      {/* 
        Height will take all remaining space 
        It can't be shrunk under 100 pixels
        It can't be stretched above 300 pixels
      */}
      <div style={{ minHeight: 100, maxHeight: 300 }}>Third View</div>
    </SplitView>
  );
};

3. Combine them

Support for various combinations of Splitviews is supported. For example, this looks a bit like the Visual Studio Code layout.

import { SplitView } from "react-better-splitviews";

const CustomComponent = () => {
  return (
    <SplitView id="container">
      <SplitView id="side-bar" style={{ width: "25%" }} direction="column">
        <Workspace style={{ minHeight: 24 }} />
        <Outline style={{ minHeight: 24 }} />
        <TimeLine style={{ minHeight: 24 }} />
      </SplitView>
      <SplitView
        id="editors_panel"
        style={{ minWidth: 100 }}
        direction="column"
      >
        <SplitView id="editors" style={{ minWidth: 100 }} direction="row">
          <Editor style={{ width: 250 }} />
          <Editor style={{ minWidth: 100 }} />
          <Editor style={{ minWidth: 100 }} />
        </SplitView>
        <Panel style={{ height: "25%" }} />
      </SplitView>
    </SplitView>
  );
};

Please let us know if you need more examples.

Contributing

While we are confident this library will work for most use cases, it is still young. We welcome any feedback, recommendations and pull requests to make it even better!

API

SplitViewProperties

Prop	Type	Description	Default
style	CSSProperties	Object with CSS Properties to be applied to the SplitView	{ height: "100%", width: "100%" }
direction	Direction	Specifies the direction of the splitview. Much like Flexboxes, it can be row or column.	"row"
handleOptions	HandleOptions	Specified the looks and feel of the Handle.	see HandleOptions
onGrabHandle	Function	Gets called when a handle is grabbed by the user.	undefined (is not called)
onDragHandle	Function	Gets called when a handle is moved by the user.	undefined (is not called)
onReleaseHandle	Function	Gets called when a handle is released by the user.	undefined (is not called)

HandleOptions

Prop	Type	Description	Default
focusedColor	string	When the handle is focused (hovered, selected), this is the color it will display. Any CSS colors work here.	"#0D6EFD"
focusedSize	number	When the handle is focused (hovered, selected), this is the size (in pixels) it will have.	5
defaultColor	string	This is the default color it will display. Any CSS colors work here.	"lightgray"
defaultSize	number	This is the default size (in pixels) it will have.	1

License

MIT

Sharing is caring ❤️

Show us some love and STAR ⭐ the project if you find it useful

Send us pictures of what you did the Better SplitViews library; we can't wait to see what the community will do with it! Cheers