A React tiling pane manager
npm install react-tile-paneA React tiling pane manager
An online demo is available at https://xcfox.github.io/react-tile-pane/demo/
``shell`
npm install @use-gesture/react react-use-measure react-tile-pane
or use yarn
`shell`
yarn add @use-gesture/react react-use-measure react-tile-pane
react-tile-pane use @use-gesture/react, react-use-measure as peerDependencies, you need to install them at the same time.
First you need to create the Tile Panes List:
`tsx`
const [paneList, names] = createTilePanes({
arbutus:
cherry: cherry,
apple:
banana: banana🍌,
lemon: lemon,
mango: mango,
pomelo: pomelo,
})
As above, createTilePanes accepts a dictionary containing ReactNode, and return a paneList and a names dictionary. The structure of the output dictionary is consistent with the input, each item in the dictionary is essentially a string.
`tsx`
const rootPane: TileBranchSubstance = {
children: [
{ children: [names.apple, names.cherry] },
{
isRow: true,
grow: 2,
children: [
{ children: names.arbutus },
{ children: names.lemon },
{
children: [
{ children: names.mango, grow: 3 },
{ children: names.pomelo },
],
},
],
},
],
}
As above, we place items in the same level into the same children's array.
grow is same as flex-grow, This property specifies how much of the remaining space in the TileBranch should be assigned to the item. Its default value is 1. isRow is used to declare whether the panes is displayed as a row or a column. names
If the item of dictionary in children's array, it displayed as a Multi-Tag Pane.
> Note: Each name can only appear in the layout at most once.
`tsx`
const App: React.FC = () => {
return (
)
}
As above, we input paneList and rootNode into TileProvider as prop tilePanes and prop rootNode. TileContainer
Then, we put in TileProvider. DraggableTitle can also be put in TileProvider.
App.tsc
`tsx
import React, { useState } from 'react'
import {
createTilePanes,
DraggableTitle,
TileBranchSubstance,
TileContainer,
TileProvider,
} from 'react-tile-pane'
import './App.css'
const paneStyle: React.CSSProperties = {
width: '100%',
height: ' 100%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}
function Arbutus() {
const [number, count] = useState(1)
return (
function Apple() {
return
const [paneList, names] = createTilePanes({
arbutus:
cherry:
const rootPane: TileBranchSubstance = {
children: [
{ children: [names.apple, names.cherry] },
{
isRow: true,
grow: 2,
children: [
{ children: names.arbutus },
{ children: names.lemon },
{
children: [
{ children: names.mango, grow: 3 },
{ children: names.pomelo },
],
},
],
},
],
}
const App: React.FC = () => {
return (
)
}
export default App
`
React Tile Pane does not focus on styles.
It is recommended to use custom styles.
A complete example is available at https://github.com/xcfox/react-tile-pane/tree/main/src/App/demo/left-tab
To customize the style, the TileProvider accepts the following properties:
pane is the basic unit of layout. style
It accepts and className attributes.
When you drag the title, a box will appear inside the container to help you determine the position of the pane after releasing the mouse, this box is called preBox. style
It accepts , className, child attributes.
The stretchBar is in between the pane and is used to resize the pane.
It accepts style, className, child attributes.
TabBar for managing overlapping panes.
It accepts render, thickness, position attributes.
- render: To customize how the TabsBar is renderedthickness
- : Accepts a CSS length attribute, which defaults to px if number is passed inposition
- : Where to position the TabsBar in the pane
Hooks and components help you do more complex operations.
> Note: Hooks and Components only work inside the TileContainer
Examples can be viewed at https://github.com/xcfox/react-tile-pane/blob/main/src/App/demo/left-tab/index.tsx
DraggableTitle used to open a new pane from outside the container.style
It accepts , className, children attributes.
- name: Associate a pane from the paneList by the name
- dragConfig: Drag behavior, see more information in use-gesture doconDrag
- : Actions triggered when dragging, see more information in use-gesture doconDragEnd
- : Actions triggered when drag endsonDragStart
- : Actions triggered when drag starts
#### Example
` Get a function to get pane by name. Get a function to move the pane. Get a function to get function AutoSaveLayout() { export const LeftTabDemo: React.FC = () => { Get a function to reset layout.tsx
function PaneIcon({ name }: { name: keyof typeof icons }) {
const getLeaf = useGetLeaf()
const move = useMovePane()
const leaf = getLeaf(name)
const isShowing = !!leaf
return (
move(name, isShowing ? null : [0.99, 0.5])} />
)
}
`$3
tsx`
// Used in a React Function Components
const getLeaf = useGetLeaf()
// get a leaf by its name, when the pane is not displayed, it will return undefined
const leaf = getLeaf(names.apple)$3
tsx`
// Used in a React Function Components
const move = useMovePane()
return (
// When null is passed in, the pane will be closed.
onClick={() => move(name, isShowing ? null : [0.99, 0.5])}
style={{
cursor: 'pointer',
background: isShowing ? color.primary : color.secondary,
width: 14,
height: 14,
borderRadius: 99,
}}
/>
)$3
, used to persist the current layout.`tsx`
const localStorageKey = 'react-tile-pane-left-tab-layout'
const getRootNode = useGetRootNode()
localStorage.setItem(localStorageKey, JSON.stringify(getRootNode()))
return <>
}
const localRoot = localStorage.getItem(localStorageKey)
const root = localRoot
? (JSON.parse(localRoot) as TileBranchSubstance)
: rootPane
return (
)
}$3
tsx``
const reset = useReset()
const handleClick = useCallback(() => reset(rootPane), [])Some similar projects