npmpackage.info

Gathering detailed insights and metrics for rc-dock

Other packages similar to rc-dock

@hai-platform/rc-dock

3.2.16

dock layout for react component

@triazic/rc-dock

3.2.4

Fork of rc-dock with trivial adjustments for my personal projects. Nothing major, please refer to the main repo/package 'rc-dock' by Rick Zhou.

@torrunt/rc-dock

3.2.19

dock layout for react component

Gathering detailed insights and metrics for rc-dock

rc-dock - 3.3.2 | npmpackage.info

rc-dock

Dock Layout for React Component

3.3.2

753

Apache-2.0

JavaScript

68.85 kB

890,580 3.6

Installations

npm install rc-dock

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

22.11.0

NPM Version

10.9.0 Score

85.9

Supply Chain

94.4

Quality

83.4

Maintenance

100

Vulnerability

99.3

License

Pull Requests

Open

1

Total

76

Closed

18

Merged

57

Issues

Open

46

Total

174

Closed

128

Releases

Unable to fetch releases

Languages

JavaScript

TypeScript

Less

HTML

CSS

JavaScript (65.27%)

TypeScript (27.69%)

Less (3.74%)

HTML (2.81%)

CSS (0.49%)

Developer

ticlo

Download Statistics

Total Downloads

890,580

Last Day

868

Last Week

7,576

Last Month

28,954

Last Year

331,757

GitHub Statistics

Apache-2.0 License

753 Stars

611 Commits

101 Forks

11 Watchers

4 Branches

14 Contributors

Updated on Jun 27, 2025

Bundle Size

228.75 kB

Minified

68.85 kB

Minified + Gzipped

Bundlephobia

Maintainers

View All 14 Contributors

Package Meta Information

Latest Version

3.3.2

Package Id

rc-dock@3.3.2

Unpacked Size

570.79 kB

Size

84.00 kB

File Count

131

NPM Version

10.9.0

Node Version

22.11.0

Published on

May 18, 2025

Total Downloads

Cumulative downloads

Total Downloads

890,580

Last Day

74.3%

868

Compared to previous day

Last Week

10.9%

7,576

Compared to previous week

Last Month

14%

28,954

Compared to previous month

Last Year

14.3%

331,757

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dock Layout for React Component

Popup panel as new browser window

Dark Theme

Examples: https://ticlo.github.io/rc-dock/examples
Docs: https://ticlo.github.io/rc-dock
Discord:

Usage

1import DockLayout from 'rc-dock'
2import "rc-dock/dist/rc-dock.css";
3
4...
5
6defaultLayout = {
7  dockbox: {
8    mode: 'horizontal',
9    children: [
10      {
11        tabs: [
12          {id: 'tab1', title: 'tab1', content: <div>Hello World</div>}
13        ]
14      }
15    ]
16  }
17};
18
19render() {
20  return (
21    <DockLayout
22      defaultLayout={defaultLayout}
23      style={{
24        position: "absolute",
25        left: 10,
26        top: 10,
27        right: 10,
28        bottom: 10,
29      }}
30    />
31  )
32}
33

use as uncontrolled layout
- set layout object in DockLayout.defaultLayout
use as controlled layout
- set layout object in DockLayout.layout

types

LayoutData 🗎

Property	Type	Comments	Default
dockbox	BoxData	main dock box	empty BoxData
floatbox	BoxData	main float box, children can only be PanelData	empty BoxData

BoxData 🗎

a box is the layout element that contains other boxes or panels

Property	Type	Comments	Default
mode	'horizontal' \| 'vertical' \| 'float'	layout mode of the box
children	(BoxData \| PanelData)[]	children boxes or panels	required

PanelData 🗎

a panel is a visiaul container with tabs button in the title bar

Property	Type	Comments	Default
tabs	TabData[]	children tabs	required
panelLock	PanelLock	addition information of a panel, this prevents the panel from being removed when there is no tab inside, a locked panel can not be moved to float layer either

TabData 🗎

Property	Type	Comments	Default
id	string	unique id	required
title	string \| ReactElement	tab title	required
content	ReactElement \| (tab: TabData) => ReactElement	tab content	required
closable	bool	whether tab can be closed	false
group	string	tabs with different tab group can not be put in same panel, more options for the group can be defined as TabGroup in DefaultLayout.groups

DockLayout API

get the ref of the DockLayout component to use the following API

saveLayout 🗎

save layout

1saveLayout(): SavedLayout

loadLayout 🗎

load layout

1 loadLayout(savedLayout: SavedLayout): void

dockMove 🗎

move a tab or a panel, if source is already in the layout, you can use the find method to get it with id first

1dockMove(source: TabData | PanelData, target: string | TabData | PanelData | BoxData, direction: DropDirection): void;

find 🗎

find PanelData or TabData by id

1find(id: string | ((item: PanelData | TabData | BoxData) => boolean), filter?: Filter): PanelData | TabData | BoxData | undefined;

updateTab 🗎

update a tab with new TabData

returns false if the tab is not found

1updateTab(id: string, newTab: TabData): boolean;

No vulnerabilities found.

10

Maintained

Determines if the project is "actively maintained".

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

2

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

3.6

/10

Last Scanned on 2025-06-23

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to rc-dock

Other packages similar to rc-dock

rc-dock

Installations

Developer Guide

Yes

CommonJS

22.11.0

10.9.0

Score

Pull Requests

1

76

18

57

Issues

46

174

128

Releases

Unable to fetch releases

Languages

Developer

Download Statistics

GitHub Statistics

Bundle Size

228.75 kB

68.85 kB

Maintainers

Package Meta Information

Total Downloads

890,580

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

Dock Layout for React Component

Popup panel as new browser window

Dark Theme

Usage

types

LayoutData 🗎

BoxData 🗎

PanelData 🗎

TabData 🗎

DockLayout API

saveLayout 🗎

loadLayout 🗎

dockMove 🗎

find 🗎

updateTab 🗎

10

10

10

10

2

0

0

0

0

0

0

0

0

3.6

/10