Have ideas to improve npm?Join in the discussion! ¬Ľ

    react-splitter-layout
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/react-splitter-layout package

    4.0.0¬†‚Äʬ†Public¬†‚Äʬ†Published

    react-splitter-layout

    Travis Coveralls npm License David devDependencies David peerDependencies

    A simple split layout for React and modern browsers.

    Demo

    Dependencies

    React-splitter-layout depends on React and prop-types. See package.json for more details.

    Installation

    $ npm install --save react-splitter-layout

    Testing

    To start example server, execute example script with npm.

    $ npm run example

    To run tests, execute test command with npm.

    $ npm test

    To run coverage tests, execute coverage script with npm.

    $ npm run coverage

    Integration

    1. Add react-splitter-layout dependency to your code.

      $ npm install --save react-splitter-layout
    2. Include the library into your code and use it.

      import React from 'react';
      import SplitterLayout from 'react-splitter-layout';
      import 'react-splitter-layout/lib/index.css';
       
      class YourComponent extends React.Component {
        render() {
          return (
            <SplitterLayout>
              <div>Pane 1</div>
              <div>Pane 2</div>
            </SplitterLayout>
          );
        }
      }
       
      export default YourComponent;

    Note: From version 4.0.0, you need to import CSS files or handle it in your favorite way explicitly.

    Usage

    Write two parts of the layout as direct children of your SplitterLayout element. SplitterLayout renders the first 2 direct children only if it has more than 2 direct children. SplitterLayout does not render splitter when it has only 1 direct children, and the only direct children occupies all available space.

    The SplitterLayout component supports the following props.

    • customClassName: PropTypes.string

      Custom CSS class name applied to the layout div. You can use this to customize layout style. Refers to the original stylesheet to see what you can customize.

    • vertical: PropTypes.bool

      Determine whether the layout should be a horizontal split or a vertical split. The default value is false.

    • percentage: PropTypes.bool

      Determine whether the width of each pane should be calculated in percentage or by pixels. The default value is false, which means width is calculated in pixels.

    • primaryIndex: PropTypes.number

      Index of the primary pane. Since SplitterLayout supports at most 2 children, only 0 or 1 is allowed. The default value is 0.

      A primary pane is used to show users primary content, while a secondary pane is the other pane. When window size changes and percentage is set to false, primary pane's size is flexible and secondary pane's size is kept unchanged. However, when the window size is not enough for showing both minimal primary pane and minimal secondary pane, the primary pane's size is served first.

    • primaryMinSize: PropTypes.number

      Minimal size of primary pane. The default value is 0.

      When percentage is set to false, this value is pixel size (25 means 25px). When percentage is set to true, this value is percentage (25 means 25%).

    • secondaryMinSize: PropTypes.number

      Minimal size of secondary pane.

    • secondaryInitialSize: PropTypes.number

      Initial size of secondary pane when page loads.

      If this prop is not defined, SplitterLayout tries to split the layout with equal sizes. (Note: equal size may not apply when there are nested layouts.)

    • onDragStart: PropTypes.func

      Called when dragging is started.

      No parameter will be passed to event handlers.

    • onDragEnd: PropTypes.func

      Called when dragging finishes.

      No parameter will be passed to event handlers.

    • onSecondaryPaneSizeChange: PropTypes.func

      Called when the size of secondary pane is changed.

      Event handlers will be passed with a single parameter of number type representing new size of secondary pane. When percentage is set to false, the value is in pixel size. When percentage is set to true, the value is in percentage.

    Release History

    • 4.0.0
      • Stylesheets are no longer integrated by default. It has to be handled in your favorite way explicitly.
    • 3.0.0
      • Add dragging and size change events.
      • Drop support of React earlier than 15.5.0.
      • 100% code coverage test!
    • 0.2.1
      • Fix an incorrect layout when nesting a horizontal splitter inside a vertical one, and now root element of the splitter is absolutely positioned.
    • 0.1.0
      • First proper release.

    License

    MIT

    Install

    npm i react-splitter-layout

    DownloadsWeekly Downloads

    11,790

    Version

    4.0.0

    License

    MIT

    Unpacked Size

    17.3 kB

    Total Files

    7

    Last publish

    Collaborators

    • avatar