react-splitter

Splitter container for React apps

<div /> component that appends a resizable separator between its children. It accepts keyboard interaction, and can be branded.

Note: The separator is appended as long as the <Splitter /> component has 2 child HTML element nodes.

Open examples on CodeSandbox

// Include stylesheet in your application
import "@cabezonidas/react-splitter/index.css";

export const Example = () => {
  return (
    // Render 2 children HTML elements
    <Splitter className="some-class">
      <section />
      <section />
    </Splitter>
  )
}

Resources

• https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/

Horizontal

Vertical

Custom navbar