https://github.com/insertish/overlapping-panels
Gestures-driven navigation UI for React.js
https://github.com/insertish/overlapping-panels
Last synced: 3 months ago
JSON representation
Gestures-driven navigation UI for React.js
- Host: GitHub
- URL: https://github.com/insertish/overlapping-panels
- Owner: insertish
- Created: 2022-01-23T22:04:17.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2022-01-23T22:05:02.000Z (over 3 years ago)
- Last Synced: 2025-02-28T03:39:46.538Z (3 months ago)
- Language: TypeScript
- Size: 234 KB
- Stars: 5
- Watchers: 3
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Overlapping Panels
> Gestures-driven navigation UI for React.js
[](https://www.npmjs.com/package/react-overlapping-panels)
This is a Javascript / React implementation of Discord's [OverlappingPanels](https://github.com/discord/OverlappingPanels).
Gesture-based navigation allows us to create more natural interactions and avoids conflict with native gesture navigation.
The current implementation relies almost entirely on CSS, inspired by [bree](https://bree.dev)'s [css-drawer-snap](https://github.com/Brecert/css-drawer-snap). By using CSS scroll snap we rely on the browser to resolve which scrollbar should be scrolled at what time, so you avoid sidebars opening when scrolling vertically through something such as messages or when scrolling sideways through another element.
## Install
```bash
npm install --save react-overlapping-panels
```
```bash
yarn add react-overlapping-panels
```
## Usage
```tsx
import React, { Component } from 'react'
import { OverlappingPanels, ShowIf } from 'react-overlapping-panels'
import 'react-overlapping-panels/dist/index.css'
function MyComponent() {
return (
I am the left panel.,
width: 300
}}
rightPanel={{
component: I am the right panel.,
width: 250
}}
bottomNav={{
component: hello!,
height: 40,
showIf: ShowIf.Left
}}>
main content!
)
}
// See example/src/App.tsx for more working examples.
```
## Develop Locally
Clone the project using:
```bash
git clone https://gitlab.insrt.uk/insert/overlapping-panels
```
Build and watch files for the library:
```bash
yarn start
```
And build and watch files for the example:
```bash
cd example
yarn start
```
## To-Do
- Add RTL support.
## Preview
Example (REVOLT PWA): https://autumn.revolt.chat/attachments/GBokkPYJIJqsaXKndNZPkr2xD5H33t5QVAYKsRCqRc/simplescreenrecorder-2021-06-14_14.42.20.mp4
(The following ones are a bit choppy since I recorded them with Peek instead of SSR)
Example in REVOLT: https://autumn.revolt.chat/attachments/ypmI99sJqyeBEt5LI3dNXSE5WIUPlg1kp4XY7NAbnq/Peek%202021-06-14%2013-32.webm
Demo taken from examples: https://autumn.revolt.chat/attachments/soJ5hEJYW2vG2kpxlrE98BI8aZu0NY8FMHeYAfL1kH/Peek%202021-06-14%2014-22.webm