https://github.com/hlorenzi/react-dockable

An easy-to-use dockable window manager for React, fully embracing hooks! -- https://hlorenzi.github.io/react-dockable/
https://github.com/hlorenzi/react-dockable

component dock dockable drag-and-drop gutter layout panel popout react react-hooks resizeable slider tabs typescript typescript-library window windowing

Last synced: about 2 months ago
JSON representation

An easy-to-use dockable window manager for React, fully embracing hooks! -- https://hlorenzi.github.io/react-dockable/

• Host: GitHub
• URL: https://github.com/hlorenzi/react-dockable
• Owner: hlorenzi
• Created: 2021-10-24T01:37:28.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2021-12-14T09:22:48.000Z (about 3 years ago)
• Last Synced: 2024-10-13T14:11:17.905Z (2 months ago)
• Topics: component, dock, dockable, drag-and-drop, gutter, layout, panel, popout, react, react-hooks, resizeable, slider, tabs, typescript, typescript-library, window, windowing
• Language: TypeScript
• Homepage:
• Size: 2.6 MB
• Stars: 21
• Watchers: 2
• Forks: 2
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml

Awesome Lists containing this project

README

        
# react-dockable

![react-dockable example video](example.gif)

An easy-to-use dockable window manager for React,

fully embracing hooks!

[Try it right now!](https://hlorenzi.github.io/react-dockable/)

Your custom content's lifecycle hooks are respected,

so `useState`, `useEffect`, etc. work out of the box,

and state carries over even if the user rearranges

their panels.

[![npm][badge-npm-img]][badge-npm-url]

[![Discord][badge-discord-img]][badge-discord-url]

[badge-discord-img]: https://img.shields.io/discord/394999035540275222?label=Join%20the%20Discord%20server!&logo=discord

[badge-discord-url]: https://discord.com/invite/pXeDXGD

[badge-npm-img]: https://img.shields.io/npm/v/@hlorenzi/react-dockable

[badge-npm-url]: https://www.npmjs.com/package/@hlorenzi/react-dockable

## Installation

```

npm install @hlorenzi/react-dockable

```

## Example

```tsx

import * as React from "react"

import * as Dockable from "@hlorenzi/react-dockable"

function App()

{

    // Create the base state,

    // and set up initial content

    const state = Dockable.useDockable((state) =>

    {

        Dockable.createDockedPanel(

            state, state.rootPanel, Dockable.DockMode.Full,

            )

    })

    // Render the root Container element,

    // which handles all interactions on your behalf

    return 


        

    

}


// Your custom element!

function Counter()

{

    const [value, setValue] = React.useState(0)

    const countUp = () => setValue(value + 1)

    const ctx = Dockable.useContentContext()

    ctx.setTitle(`Count: ${ value }`)

    ctx.setPreferredSize(300, 250)

    return 


        { value }

        Count up!

    

}

```