Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
react-better-splitviews
Advanced tools
Readme
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.
npm i react-better-splitviews
// OR
yarn add react-better-splitviews
and
import { SplitView } from "react-better-splitviews";
There are 2 orientations you can use for your SplitView
: rows
or columns
.
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>
);
};
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>
);
};
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>
);
};
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>
);
};
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.
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!
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) |
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 |
MIT
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
FAQs
A great react component with a simple API that mimics the way SplitViews operate in visual studio code.
The npm package react-better-splitviews receives a total of 3 weekly downloads. As such, react-better-splitviews popularity was classified as not popular.
We found that react-better-splitviews demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.