react dashboard pro

React Dashboard Pro

Out-of-the-box one-stop dashboard solution

Dynamic Dashboard functionality in just a few simple steps

It solves the customization needs of Dashboard + Widget, which are almost used by the B-side of "Thousands of People, Thousands of Faces".

A one-stop dashboard solution that works right out of the box

Have dynamic dashboard functionality in just a few simple steps

It solves the Dashboard + Widget customization needs of "thousands of people".

Repository

https://github.com/yuanguandong/react-dashboard-pro

Docs

https://yuanguandong.github.io/react-dashboard-pro/

Demo

Install

npm i react-dashboard-pro -S

DownLoad Widget

npm i widgets-cli -D
npx widgets-cli

Widget Store

https://yuanguandong.github.io/react-widgets/

Usage

 import React , { useState } from 'react' ;
import type { LayoutsIF } from 'react-dashboard-pro' ;
import Dashboard from 'react-dashboard-pro' ;
import allWidgets from '../widgets' ;

export default ( ) => {
  const [ layout , setLayout ] = useState < LayoutsIF > ( [ ] ) ;
  const onLayoutChange = ( layout : LayoutsIF ) => {
    setLayout ( layout ) ;
  } ;
  return (
    < Dashboard
      widgets = { allWidgets }
      onLayoutChange = { onLayoutChange }
      layout = { layout }
    />
  ) ;
} ; 

Props

property	description	type	defaultValue	required
widgets	Optional collection of applet objects	{ [key: string]:widget}		true
editMode	Whether to edit status	boolean	false	false
defaultLayout	default layout	layoutItem[]	[]	false
widgetWrapClassName	widget container class name	string		false
widgetWrapStyle	widget container style	React.CSSProperties		false
layout	layout data	layoutItem[]	null	false
minHeight	minimum height	number	300	false
maxWidgetLength	The maximum number of widgets that can be added to the current dashboard	number	20	false
toolbar	Whether to display the default toolbar	{type: 'left' | 'right' | 'top' | 'bottom'; speed: number;}	true	false
storageKey	Locally stored unique identifier	boolean	'default'	false
onLayoutChange	Layout change callback	(layout: LayoutsIF) => void		false
onReset	Clear button callback	(dirtyCurrentLayout: LayoutsIF, currentLayout: LayoutItem) => void		false
onRemoveWidget	Delete the callback of the applet	(widget: WidgetIF,dirtyCurrentLayout: LayoutsIF,currentLayout: LayoutsIF) => void		false
onAddWidget	Add a callback to the mini program	(widget: WidgetIF,dirtyCurrentLayout: LayoutsIF,currentLayout: LayoutsIF) => void		false
onReload	Refresh button callback	(currentLayout: LayoutsIF) => void		false
onCancelEdit	Cancel edit callback	(dirtyCurrentLayout: LayoutsIF,currentLayout: LayoutItem) => void		false
onEdit	Enter the edit callback	(currentLayout: LayoutsIF) => void		false
onSave	Save button callback	(currentLayout: LayoutsIF) => void		false
onRevert	Restore button callback	(dirtyCurrentLayout: LayoutsIF, currentLayout: LayoutItem) => void		false

Widget

A widget can be any open content and can be freely expanded. The entry file needs to export an object to describe the widget. The object format is as follows. For more widgets, you can see here

The default widgets basically rely on antd and less. Pay attention to the installation of dependencies.

property	description	type	defaultValue	required
name	Mini program name	string		true
description	Mini program description	string		true
tags	Tags, used as classification basis for mini program selectors	string[]		true
component	Mini program component	Component | FunctionComponent		true
configComponent	Configuration components corresponding to the mini program	Component | FunctionComponent | null		true
maxLength	The maximum number of times this applet can be added to the current dashboard	number		true
snapShot	Mini program snapshot image, used for mini program selector display	ImageBitmapSource		true
icon	Mini program icon, used for mini program selector display	ReactElement		true
iconBackground	Mini program icon background, used for mini program selector display	string		true
size	Mini program size information	{defaultWidth: number;defaultHeight: number;maxWidth: number;maxHeight: number;minWidth: number;minHeight: number}		true

 // todo/index.tsx
import { CalendarOutlined } from '@ant-design/icons' ;
import Panel from './component' ;
import snapShot from './snapshot.png' ;

export default {
  name : 'Todo' ,
  description : 'todo list' ,
  tags : [ 'all' , 'list' ] ,
  component : Panel ,
  configComponent : null ,
  maxLength : 2 ,
  snapShot ,
  icon : < CalendarOutlined /> ,
  iconBackground : 'linear-gradient(-20deg, #b721ff 0%, #21d4fd 100%)' ,
  size : {
    defaultWidth : 3 ,
    defaultHeight : 11 ,
    maxWidth : 12 ,
    maxHeight : 16 ,
    minWidth : 2 ,
    minHeight : 4 ,
  } ,
}
// **/**.index ……

// widgets/index.tsx
import clock from './clock' ;
import column from './column' ;
import guide from './guide' ;
import popular from './popular' ;
import ring from './ring' ;
import todo from './todo' ;

export default { clock , guide , popular , todo , column , ring } ;

Layout

Generally, layout information does not need to be paid much attention to. It only needs to be serialized and stored in string form. If you want to obtain the dashboard layout data in real time (for example, when you want to set the default layout), you can focus (mouse click) to the corresponding On the dashboard, press the shortcut key Ctrl+Shift+C to copy the layout data to the clipboard, and the console panel will also print out the layout data.

property	description	type	defaultValue	required
i	Unique identifier, starting with the unique identifier of the mini program followed by an underscore, such as 'widgetKey-1234567'	string		true
w	Number of width copies, 12 copies in total	number		true
h	Number of height copies, 1 copy is about 30px	number		true
x	Horizontal position, 12 copies in total	number		true
y	Portrait position, 1 copy is about 30px	number		true
minW	minimum width	number		true
maxW	maximum width	number		true
h	minimum height	number		true
maxH	maximum height	number		true

 export default [
  {
    w : 3 ,
    h : 16 ,
    x : 0 ,
    y : 0 ,
    i : 'Popular-81735522335293475546087951289435' ,
  } ,
  {
    w : 3 ,
    h : 11 ,
    x : 3 ,
    y : 5 ,
    i : 'Todo-53084247679600442035440807237732' ,
  }
] 

Method

The component instance can be obtained through ref. Some methods and dom objects are mounted on the instance object, which can easily expand custom Toolbar and WidgetSelector.

property	description	type
dom	DOM object	HTMLDivElement
addWidget	Add applet	(widget)=>void
removeWidget	Delete applet	(i:widgetKey)=>void
reload	refresh	()=>void
edit	Go to edit	()=>void
cancelEdit	Cancel edit	()=>void
revert	reset	()=>void
save	save	()=>void

 import React , { useRef } from 'react' ;
import Dashboard from 'react-dashboard-pro' ;
import allWidgets from '../widgets' ;

export default ( ) => {
  const ref = useRef ( )
  const addWidget = ( ) => {
    ref . current . addWidget ( 'Todo-1234567' )
  }
  return ( < >
      < Dashboard
        ref = { ref }
        widgets = { allWidgets }
      />
      < button onClick = { addWidget } >新增</ button >
    </ >
  ) ;
} ; 

Todo

✅ configPanel

☑️ gap

☑️ modern theme

☑️ dark theme

☑️ more widgets

✅ widget-cli

☑️Internationalization

The End

• Everyone is welcome to raise issues. I will try my best to meet your pain points if you have any needs.
• I will continue to maintain this project, so everyone can use it with confidence.

If you find it useful, please give it a star.