react-splitter-layout vs react-resizable vs react-split-pane
React Resizable and Splitter Libraries
Search packages..
react-splitter-layoutreact-resizablereact-split-paneSimilar Packages:

React Resizable and Splitter Libraries

React resizable and splitter libraries provide components that allow users to dynamically resize elements within a React application. These libraries are useful for creating flexible layouts where users can adjust the size of panels, columns, or any other elements by dragging their borders. This functionality enhances user experience by providing more control over the interface, especially in applications with complex or adjustable layouts. Examples include resizable panels, split views, and adjustable grids.

Npm Package Weekly Downloads Trend

3 Years

Github Stars Ranking

Stat Detail

Package
Downloads
Stars
Size
Issues
Publish
License
react-splitter-layout26,722432-387 years agoMIT
react-resizable02,57154.6 kB42 months agoMIT
react-split-pane03,373104 kB317 days agoMIT

Feature Comparison: react-splitter-layout vs react-resizable vs react-split-pane

Basic Resizing

  • react-splitter-layout:

    react-splitter-layout offers advanced resizing capabilities with support for multiple panes, both horizontal and vertical. It allows for more complex layouts with multiple resizable areas.

  • react-resizable:

    react-resizable provides basic resizing functionality for any element. You can make elements resizable by wrapping them with the Resizable component and specifying the dimensions you want to allow resizing in.

  • react-split-pane:

    react-split-pane allows for resizing between two panes (or more with nested split panes). It provides a simple interface for adjusting the size of each pane by dragging the divider.

Customization

  • react-splitter-layout:

    react-splitter-layout provides extensive customization options, including the ability to style the splitter, set default sizes, and configure nested splitters for more complex layouts.

  • react-resizable:

    react-resizable is highly customizable. You can style the resizable handles, set minimum and maximum sizes, and control the resizing behavior through props.

  • react-split-pane:

    react-split-pane offers some customization options, such as setting the initial size of the panes, defining minimum and maximum sizes, and styling the divider.

Nested Resizing

  • react-splitter-layout:

    react-splitter-layout also supports nested splitters, enabling more complex layouts with multiple levels of resizable areas.

  • react-resizable:

    react-resizable does not support nested resizing out of the box, but you can implement it by combining multiple resizable components.

  • react-split-pane:

    react-split-pane supports nested split panes, allowing you to create multi-level resizable layouts by nesting SplitPane components.

Accessibility

  • react-splitter-layout:

    react-splitter-layout also focuses on accessibility, offering keyboard support and ARIA roles to ensure that the splitter and its components are usable by all.

  • react-resizable:

    react-resizable provides basic accessibility features, but you may need to enhance it further depending on your implementation.

  • react-split-pane:

    react-split-pane is designed with accessibility in mind, providing keyboard navigation and ARIA attributes for the splitter and panes.

Ease of Use: Code Examples

  • react-splitter-layout:

    Basic usage of react-splitter-layout

    import React from 'react';
import { SplitterLayout } from 'react-splitter-layout';
import 'react-splitter-layout/lib/index.css';

const SplitterLayoutExample = () => {
  return (
    <SplitterLayout>
      <div style={{ background: '#f0f0f0' }}>Pane 1</div>
      <div style={{ background: '#e0e0e0' }}>Pane 2</div>
      <div style={{ background: '#d0d0d0' }}>Pane 3</div>
    </SplitterLayout>
  );
};

export default SplitterLayoutExample;
  • react-resizable:

    Basic usage of react-resizable

    import React from 'react';
import { Resizable } from 'react-resizable';
import 'react-resizable/css/styles.css';

const ResizableBox = () => {
  return (
    <Resizable width={200} height={200} minConstraints={[100, 100]} maxConstraints={[300, 300]}>
      <div style={{ border: '1px solid black', width: '100%', height: '100%' }}>
        Resizable Box
      </div>
    </Resizable>
  );
};

export default ResizableBox;
  • react-split-pane:

    Basic usage of react-split-pane

    import React from 'react';
import SplitPane from 'react-split-pane';

const SplitPaneExample = () => {
  return (
    <SplitPane split="vertical" minSize={50} defaultSize={100} maxSize={300}>
      <div style={{ background: '#f0f0f0' }}>Left Pane</div>
      <div style={{ background: '#e0e0e0' }}>Right Pane</div>
    </SplitPane>
  );
};

export default SplitPaneExample;

How to Choose: react-splitter-layout vs react-resizable vs react-split-pane

  • react-splitter-layout:

    Choose react-splitter-layout if you need a more feature-rich splitter layout with support for horizontal and vertical splitting, as well as nested splitters. It offers better control over the layout and is suitable for more complex applications that require advanced splitting functionality.

  • react-resizable:

    Choose react-resizable if you need a lightweight, flexible solution for making any element resizable. It provides a simple API and is highly customizable, allowing you to create resizable components with minimal setup.

  • react-split-pane:

    Choose react-split-pane if you need a straightforward way to create split-pane layouts with adjustable dividers. It is easy to use and integrates well with existing layouts, making it ideal for applications that require simple, two-pane or multi-pane designs.

Similar Npm Packages to react-splitter-layout

react-splitter-layout is a React component library that provides a simple way to create resizable and draggable layouts. It allows developers to easily implement split views in their applications, enabling users to adjust the size of different sections of the layout dynamically. This is particularly useful for applications that require a flexible interface, such as dashboards or file explorers. With its straightforward API and customizable options, react-splitter-layout makes it easy to enhance user experience by providing a responsive and interactive layout.

However, there are several alternatives in the React ecosystem that also offer layout management and resizing capabilities. Here are a couple of noteworthy options:

  • react-grid-layout is a powerful library for building responsive grid layouts in React applications. It allows developers to create draggable and resizable grid items, making it ideal for applications that require a more complex layout structure. With features like responsive breakpoints, grid item positioning, and drag-and-drop functionality, react-grid-layout is well-suited for building dashboards, galleries, and other grid-based interfaces. If your application needs a more comprehensive grid system with advanced layout options, react-grid-layout is a great choice.

  • react-resizable is a lightweight library that provides resizable components for React applications. It allows developers to create resizable elements with minimal effort, making it easy to implement features like adjustable panels or containers. While react-resizable focuses solely on the resizing aspect, it can be combined with other layout libraries to create more complex interfaces. If you need a simple solution for adding resizing capabilities to your components without the overhead of a full layout system, react-resizable is an excellent option.

To see how react-splitter-layout compares with react-grid-layout and react-resizable, check out the comparison: Comparing react-grid-layout vs react-resizable vs react-splitter-layout.

Similar Npm Packages to react-resizable

react-resizable is a React component library that allows developers to create resizable components easily. It provides a simple API for adding resizable functionality to any element, enabling users to adjust the size of components dynamically. This can be particularly useful in applications that require flexible layouts or user-customizable interfaces. While react-resizable is a great tool for adding resizing capabilities, there are other libraries that offer similar functionalities. Here are a few alternatives:

  • react-draggable is a library that provides draggable functionality for React components. While its primary focus is on enabling drag-and-drop interactions, it can also be combined with other libraries to create resizable components. react-draggable is ideal for applications that require both dragging and resizing capabilities, allowing for a more interactive user experience. If you need to implement features like dragging elements around a canvas or grid, react-draggable is a solid choice.
  • react-grid-layout is a powerful library for creating grid-based layouts in React applications. It supports both draggable and resizable grid items, making it an excellent choice for building complex layouts where components can be rearranged and resized. react-grid-layout is particularly useful for dashboard-like interfaces or applications that require a flexible grid system. If your project involves managing a grid of components that users can manipulate, react-grid-layout offers a comprehensive solution.

To see how react-resizable compares with react-draggable and react-grid-layout, check out the comparison: Comparing react-draggable vs react-grid-layout vs react-resizable.

Similar Npm Packages to react-split-pane

react-split-pane is a popular React component that allows developers to create resizable split panes in their applications. This library provides an easy way to implement layouts where users can adjust the size of different sections of the UI by dragging a divider. It's particularly useful for applications that require a flexible layout, such as dashboards, code editors, or any interface where space management is crucial.

While react-split-pane is a great choice for creating resizable layouts, there are alternative libraries that offer similar functionality. Here are a couple of notable alternatives:

  • react-resizable is a lightweight library that provides resizable components for React applications. It allows developers to create resizable elements that can be adjusted by the user, making it easy to implement flexible layouts. Unlike react-split-pane, which focuses on splitting panes, react-resizable can be applied to any component, giving developers more flexibility in how they manage resizing. If you need a more general-purpose solution for making components resizable, react-resizable is a solid choice.
  • react-splitter-layout is another library designed for creating split layouts in React applications. It offers a similar feature set to react-split-pane, allowing users to resize sections of the layout. However, react-splitter-layout provides a more modern API and additional features, such as vertical and horizontal splitters, and customizable styles. If you're looking for a more contemporary alternative that still focuses on split layouts, react-splitter-layout might be the right fit.

To see how react-split-pane compares with react-resizable and react-splitter-layout, check out the comparison: Comparing react-resizable vs react-split-pane vs react-splitter-layout.

README for react-splitter-layout

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

npm-compare.com is an independent website designed to help developers choose the most suitable npm packages. We are not affiliated with npm, Inc, the official website for the npm registry. Note that npm is a registered trademark of npm, Inc. Please share your feedback via our GitHub repository. For more details, please refer to our Terms & Privacy.