# react-split-viewport

> It splits view in half

Latest version **0.0.3** (published 2021-01-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-split-viewport
pnpm add react-split-viewport
yarn add react-split-viewport
bun add react-split-viewport
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2021-01-14 |
| First published | 2021-01-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 2 |
| Unpacked size | 53.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | mertNalcaci |
| Maintainers | 1ow4 |

## Links

- npm: https://www.npmjs.com/package/react-split-viewport
- Repository: https://github.com/mertNalcaci/react-split-view
- Homepage: https://github.com/mertNalcaci/react-split-view#readme
- Issues: https://github.com/mertNalcaci/react-split-view/issues
- npm.io page: https://npm.io/package/react-split-viewport

## Dependencies (2)

- [prop-types](https://npm.io/package/prop-types.md) ~15.7.2
- [styled-components](https://npm.io/package/styled-components.md) ~5.2.1

## Recent versions

- 0.0.3 (latest) — 2021-01-14
- 0.0.2 — 2021-01-12
- 0.0.1 — 2021-01-03

## README

# react-split-viewport

A react component that splits view in half.

## [Live Demo](https://codesandbox.io/s/react-split-viewport-d8ntt?file=/src/App.js)

[![NPM](https://img.shields.io/npm/v/react-split-viewport.svg)](https://www.npmjs.com/package/react-split-viewport) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install
```bash
npm install --save react-split-viewport
```
or
```bash
yarn add react-split-viewport
```

## Usage

```jsx
import React from 'react';
import { SplitView } from 'react-split-viewport';

const App = () => (
	<SplitView
		initWidth={45}
		range={{
		  min: 25,
		  max: 75
		}}
		left={<div>Left</div>}
		right={<div>Right</div>}
	/>
);

export default App;
```

## Props

| Name                                         | Description         |Default | Value            |
|:--------------------------------------------------|:----------------------------------|:-----|:--------|
| initWidth                          | Initial width of the right side.(Initial left side will be calculated with respect to this value)                    | 50   | number    |
| left                          | Content for left side                    | <div>Left</div>   | element   |
| right                          | Content for right side                    | <div>Right</div>   | element   |
| range                          | Minimum and maximum adjustment levels                    | { min: 25, max: 75 }   | { min: number, max: number }    |
| onResize                          | Resize callback                    | null   | func   |
| resizeProps                          | Style property for resize bar                    | { bgColor: '#322f3d', width: 10, height: { val: 100, unit: '%' } }   | { bgColor: string, width: number, height: { val: number, unit: string } }   |
| resizeHandlerProps                          | Style property for resize handler                    | { markup: <DefaultResizeHandler />, position: { x: 50, y: 50, unit: '%' } }   | { markup: element, position: { x: number, y: number, unit: string } }   |
| showSwitcher                          | Switcher visibility                    | true   | bool   |
| onSwitchClick                          | Switch click callback                    | null   | func   |
| switcherProps                          | Style property for switch button                    | { markup: <DefaultButton />, position: { x: 10, y: 10, unit: 'px' } }   | { markup: element, position: { x: number, y: number, unit: string } }   |

## License

MIT © [mertNalcaci](https://github.com/mertNalcaci)

---
_Source: https://npm.io/package/react-split-viewport · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._