react-better-splitviews
v1.2.5TypeScript
A great react component with a simple API that mimics the way SplitViews operate in visual studio code.
0/weekUpdated 3 years agoMITUnpacked: 39.8 KB
Published by Christophe Beaulieu
npm install react-better-splitviewsHandle Split Views like it's 2022
$3
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
``ssh`
npm i react-better-splitviews
// OR
yarn add react-better-splitviews
and
`jsx`
import { SplitView } from "react-better-splitviews";
Examples
There are 2 orientations you can use for your SplitView: rows or columns.
$3
`jsx
import { SplitView } from "react-better-splitviews";
const CustomComponent = () => {
return (
First View
Second View
Third View
);
};
`
With constraints
`jsx
import { SplitView } from "react-better-splitviews";
const CustomComponent = () => {
return (
{/ Width will start at 10 pixels /}
First View
{/*
Width will start at 50% of the SplitView's
It can't be shrunk under 110 pixels
*/}
Second View
{/*
Width will take all remaining space
It can't be shrunk under 100 pixels
It can't be stretched above 300 pixels
*/}
Third View
);
};
`
$3
jsx
import { SplitView } from "react-better-splitviews";const CustomComponent = () => {
return (
First View
Second View
Third View
);
};
`With constraints
jsx
import { SplitView } from "react-better-splitviews";const CustomComponent = () => {
return (
{/ Height will start at 10 pixels /}
First View
{/*
Height will start at 50% of the SplitView's
It can't be shrunk under 110 pixels
*/}
Second View {/*
Height will take all remaining space
It can't be shrunk under 100 pixels
It can't be stretched above 300 pixels
*/}
Third View
);
};
`$3
Support for various combinations of Splitviews is supported. For example, this looks a bit like the Visual Studio Code layout.
jsx
import { SplitView } from "react-better-splitviews";const CustomComponent = () => {
return (
style={{ minWidth: 100 }}
direction="column"
>
);
};
`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
$3
| Prop | Type | Description | Default |
| --------------- | ------------- | ------------------------------------------------------------------------------------------- | ----------------------------------- |
| style | CSSProperties | Object with CSS Properties to be applied to the SplitView |
|
| 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) |$3
| 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