https://github.com/giusdp/live_pane
Resizable pane components for LiveView.
https://github.com/giusdp/live_pane
component-library liveview phoenix
Last synced: 5 months ago
JSON representation
Resizable pane components for LiveView.
- Host: GitHub
- URL: https://github.com/giusdp/live_pane
- Owner: giusdp
- License: mit
- Created: 2025-04-18T12:37:48.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2025-05-06T06:30:14.000Z (5 months ago)
- Last Synced: 2025-05-12T19:13:34.608Z (5 months ago)
- Topics: component-library, liveview, phoenix
- Language: TypeScript
- Homepage: https://live-pane.fly.dev
- Size: 334 KB
- Stars: 24
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Live Pane
[](https://github.com/giusdp/live_pane/actions/workflows/tests.yaml)
[](https://hex.pm/packages/live_pane)
A client-side, dependency-free, set hooks and components to easily create resizable panels in your Phoenix applications.
This project has taken a lot of inspiration and code from the work done by
[paneforge](https://.github.com/svecosystem/paneforge) and [react-resizable-panels](https://github.com/bvaughn/react-resizable-panels).
## Installation
Add `live_pane` to your list of dependencies in `mix.exs`:
```elixir
def deps do
[
{:live_pane, "~> 0.6.2"}
]
end
```
Then open up your `app.js` and import/setup the hooks.
If you have a `package.json` file at the top of `assets`, you can add this to it:
```json
"dependencies": {
"live_pane": "file:../deps/live_pane",
},
```
And then import the module:
```javascript
import { createLivePaneHooks } from 'live_pane';
```
Or you can import the file directly:
```javascript
// this path would be relative to where your app.js happens to be.
import { createLivePaneHooks } from '../deps/live_pane'
```
Finally setup the hooks in your `app.js` file:
```javascript
const { groupHook, paneHook, resizerHook } = createLivePaneHooks()
let Hooks = {}
Hooks.live_pane_group = groupHook;
Hooks.live_pane = paneHook;
Hooks.live_pane_resizer = resizerHook;
let liveSocket = new LiveSocket("/live", Socket, {
hooks: Hooks,
...
})
```
Also add `'../deps/live_pane/lib/**/*.*ex'` to your list of paths Tailwind will look for class names, in your
`tailwind.config.js`:
```javascript
// assets/tailwind.config.js
module.exports = {
content: [
'./js/**/*.js',
'../lib/your_app_web.ex',
'../lib/your_app_web/**/*.*ex',
'../deps/live_pane/lib/**/*.*ex', <-- add this line with the correct path
]
}
```
## Usage
Now you can use the Group, Pane and Resizer components in your LiveView templates.
```html
One
Two
```
Just make sure to set an `id` for the group and then use the same id in each pane and resizer for the `group_id` attribute, so they can be linked together.