react-win-splitview

An attempt to recreate the SplitView element from WinJS, with full TypeScript definitions.

Screeshot of react-win-splitview

Installation

With Yarn:

yarn install react-win-splitview

Or from NPM:

npm install react-win-splitview --save

Importing

Import the component via ES6 import:

import { SplitView } from "react-win-splitview";
// or use default import
import SplitView from "react-win-splitview";

Example

import { SplitView } from "react-win-splitview";
import { SplitViewNavMenu } from "react-win-splitview";

const NavMenu = () => {
    const links = [
        {
            label: "First Nav Link",
            href: "/test/one",
            icon: "1"
        },
        {
            label: "Second Nav Link",
            href: "/test/two",
            icon: () => <div>{"2"}</div>
        },
        {
            label: "Third Nav Link",
            href: "/test/three",
            icon: <div>{"3"}</div>
        }
    ]
    // An optional link component can be used for interop with navigation frameworks like React Router or React Navi.
    const linkComponent = ({children, ...props}) => {
        return (
            <a {...props}>
                {children}
            </a>
        )
    }

    return (
        <SplitViewNavMenu items={links} linkComponent={linkComponent} />
    )
}

const App = () => {
    const [open, setOpen] = React.useState(false);
    const [closeOnContentFocused, setCloseOnContentFocused] = React.useState(false);
    const [closeType, setCloseType] = React.useState<"full" | "partial">("partial");

    // Event handlers
    const toggleOpen = () => setOpen(!open);
    const toggleCloseOnContentfocused = () => setCloseOnContentFocused(!closeOnContentFocused);
    const toggleCloseType = () => setCloseType(closeType === "full" ? "partial" : "full");

    // Note: this package does *not* include a top navigation bar component.
    return (
        <div>
            <nav className="nav" style={{display: "flex"}}>
                <div className="controls">
                    <button className="toggle-button" type="button" onClick={toggleOpen}>
                        ≡
                    </button>
                </div>
                <h1>{"React Win SplitView"}</h1>
                <div className="controls">
                    <button type="button" onClick={toggleCloseType}>
                        {"Pane close type: " + closeType}
                    </button>
                    <button type="button" onClick={toggleCloseOnContentfocused}>
                        {"Close on content focused: " + closeOnContentFocused}
                    </button>
                </div>
            </nav>
            <SplitView
                open={open}
                closeType={closeType}
                closeOnContentFocused={closeOnContentFocused}
                ariaLabel={closeType}
                onClose={() => setOpen(false)}
                navContent={NavMenu}
            >
                <div>
                    <h1>{"Hello world!"}</h1>
                </div>
            </SplitView>
        </div>
    );
}

Props

Note: This package has full TypeScript definitions! You should automatically receive intellisense for all of the props documented below:

Name Type Required Description
open boolean Required Whether the SplitView pane is open or not.
closeType "full" | "partial" Required Tells the SplitView how to display when closed. Use full to close the SplitView completely, and partial to keep a small sliver of it open to show icons.
onClose () => void Required A function that’s called when the SplitView wants to close itself. Note that this is only the SplitView requesting to be closed, it will not close itself.
navContent React.ReactNode | ((props: NavRenderProps) => React.ReactNode) Required Content to show in the SplitView’s menu. Typically this is a component that renders a list of navigation links. This package includes a default SplitViewNavMenu component that can be used here.
children React.ReactNode Required Content to show in the SplitView’s content area (i.e. where your app/page goes).
ariaLabel string Optional Aria label for the SplitView’s menu.
closeOnContentFocused boolean Optional Whether the SplitView should request to be closed when the user interacts with the main content (not the navigation content). Default: false.

Styling

If you’d like to style the SplitView components yourself, you can change the following CSS variables with your own stylesheet:

Name Default value
--sidebar_background_color #f2f2f2
--sidebar_border_right 1px solid rgba(0, 0, 0, 0.1)
--sidebar_top_offset 0
--sidebar_left_offset 0
--sidebar_height 100vh
--sidebar_open_width 25vw
--content_open_width calc(100vw - var(--sidebar_open_width))
--sidebar_partial_width 4vw
--content_partial_width calc(100vw - var(--sidebar_partial_width))
--nav_menu_item_hover_background_color rgba(0,0,0,.1)
--nav_menu_item_active_background_color rgba(0,0,0,.2)
--nav_menu_item_text_color #000000
--nav_menu_item_active_text_color #000000

Example:

.react-win-splitview {
    /* Change the background color of the sidebar */
    --sidebar_background_color: #333;
    /* Change the width of the sidebar when it's open */
    --sidebar_open_width: 330px;
}

GitHub

View Github