npmpackage.info

Gathering detailed insights and metrics for rc-dock

Other packages similar to rc-dock

react-dock

0.7.0

Resizable dockable react component

rc-util

5.43.0

Common Utils For React Component

rc-motion

2.9.3

React lifecycle controlled motion library

rc-slider

11.1.7

Slider UI component for React

Gathering detailed insights and metrics for rc-dock

rc-dock

Dock Layout for React Component

3.3.0

691

Apache-2.0

JavaScript

68.77 kB

724,970 2.7

Installations

npm install rc-dock

Pull Requests

Open

6

Total

67

Closed

11

Merged

50

Issues

Open

42

Total

170

Closed

128

Releases

Unable to fetch releases

Developer

ticlo

Developer Guide

BETA

Module System

CommonJS

Min. Node Version

Typescript Support

Yes

Node Version

20.9.0

NPM Version

10.1.0 Statistics

691 Stars

609 Commits

97 Forks

12 Watching

4 Branches

13 Contributors

Updated on 22 Nov 2024

Bundle Size

228.61 kB

Minified

68.77 kB

Minified + Gzipped

Bundlephobia

Languages

JavaScript (65.15%)

TypeScript (27.66%)

SCSS (3.86%)

HTML (2.83%)

CSS (0.5%)

Total Downloads

Cumulative downloads

Total Downloads

724,970

Last day

20.5%

2,395

Compared to previous day

Last week

20.6%

13,619

Compared to previous week

Last month

135.2%

50,626

Compared to previous month

Last year

14.4%

303,537

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

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): PanelData | TabData;

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

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

Maintained

Determines if the project is "actively maintained".

0

Token-Permissions

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

0

Pinned-Dependencies

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

0

CII-Best-Practices

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

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

2.7

/10

Last Scanned on 2024-11-18

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

Pull Requests

6

67

11

50

Issues

42

170

128

Releases

Unable to fetch releases

Developer

Developer Guide

CommonJS

Yes

20.9.0

10.1.0

Statistics

Bundle Size

228.61 kB

68.77 kB

Languages

Total Downloads

724,970

Daily Downloads

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

2

0

0

0

0

0

0

0

0

0

2.7

/10