Security News
Introducing the Socket Python SDK
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
react-splitter-light
Advanced tools
A lightweight React component for creating adjustable split views with no extra dependencies.
A lightweight React component for creating adjustable split views with no extra dependencies.
# use npm
npm install react-splitter-light
# or if you use yarn
yarn add react-splitter-light
import React, {useState} from 'react';
import {Splitter} from 'react-splitter-light';
function App () {
return (
<div style={{ height: 500 }}>
<Splitter>
<div style={{background: 'green', height: '100%'}}>
pane1
</div>
<div style={{background: 'blue', height: '100%'}}>
pane2
</div>
<div style={{background: 'brown', height: '100%'}}>
pane3
</div>
</Splitter>
</div>
);
};
Apply height: 100% to elements within the Splitter component to ensure they fully occupy the available space within their respective panels.
Splitter
Property | Description | Type | Default |
---|---|---|---|
mode | Determine the layout of panes. | 'horizontal' or 'vertical' | 'horizontal' |
initialSizes(units) | Sets the sizes of panels in units. | number[] | equal parts |
runnerSize(px) | Specifies the size of the runner. | number | 6px |
resizable | Specifies whether the panel should be resizable. | boolean | true |
minSizes(units/px) | Specifies the minimum sizes of panels. If you want specify as a 'px' set as a string or string[]. For example '10px' or ['10px', '12px'] | number/string or number/string[] | 10px |
maxSizes(units/px) | Specifies the maximum sizes of panels. If you want specify as a 'px' set as a string or string[]. For example '10px' or ['10px', '12px'] | number/string or number/string[] | Number.MAX_VALUE |
onResize | Callback invoked when the size changes. | (sizesInUnits: number[], sizes: number[]) => void | none |
discrete | Specifies the movement of the runner. | boolean or number | false |
onDragStart | This callback is invoked when a drag starts. It provides the indexes of the pair of resizable nearby panels. Fires before adding event listeners. | (event: MouseEvent, indexes: number[]) => void | none |
onDragEnd | This callback is invoked when a drag ends. It provides the indexes of the pair of resizable nearby panels. Fires after setting new sizes. | (event: MouseEvent, indexes: number[]) => void | none |
actionOnContainerResize | Specifies whether to invoke the onResize callback when the Splitter container size changes. | boolean | false |
runnerStyle | Provides the style for the runner. | CSSProperties | none |
runnerClassName | Provides the class name for the runner. | string | none |
splitterStyle | Provides the style for the splitter. | CSSProperties | none |
splitterClassName | Provides the class name for the splitter. | string | none |
paneClassName | Provides the class name for the panel. | string | none |
react-splitter-light is licensed under the MIT.
FAQs
A lightweight React component for creating adjustable split views with no extra dependencies.
We found that react-splitter-light demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.
Security News
A new Rust RFC proposes "Trusted Publishing" for Crates.io, introducing short-lived access tokens via OIDC to improve security and reduce risks associated with long-lived API tokens.