1.0.3 • Published 4 years ago

@opuscapita/react-splitpane v1.0.3

Weekly downloads
2
License
MIT
Repository
github
Last release
4 years ago

react-splitpane

Description

Split-Pane component that stores it's position to localStorage. Fires window resize event on resize to notify other components that container size has changed. Uses react-split-pane component, check out more complex usage there.

Installation

npm install @opuscapita/react-splitpane

Demo

View the DEMO

Builds

UMD

The default build with compiled styles in the .js file. Also minified version available in the lib/umd directory.

CommonJS/ES Module

You need to configure your module loader to use cjs or es fields of the package.json to use these module types. Also you need to configure sass loader, since all the styles are in sass format.

API

Prop nameTypeDefaultDescription
idstring (required)Unique ID of the component
splitstring'vertical'Split direction 'vertical' or 'horizontal'
minSizestring, number50Current size of the pane
defaultSizestring, number'50%'Initial size of the pane
rememberSizebooleantrueStore size to localStorage

Code example

import React from 'react';
import SplitPane from '@opuscapita/react-splitpane';

handleResize = (id, size) => {
  console.log(id, 'changed size to', size);
}

export default class ReactView extends React.Component {
  render() {
    return (
      <SplitPane id="myVerticalPane">
        <div></div>
        <SplitPane id="myHorizontalPane" split="horizontal">
          <div></div>
          <div></div>
        </SplitPane>
      </SplitPane>
    );
  }
}
1.0.4-rc.7

4 years ago

1.0.4-rc.6

4 years ago

1.0.4-rc.5

4 years ago

1.0.4-rc.4

4 years ago

1.0.4-rc.3

4 years ago

1.0.4-rc.1

4 years ago

1.0.4-rc.2

4 years ago

1.0.3

5 years ago

1.0.2

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago