react-dashboard-lib
Advanced tools
A library to create dashboard with widgets
Install the react-dashboard-lib using npm:
npm install react-dashboard-lib
You can use this library when you want to create dashboard for your application. Widgets or Components on Dashboard are fully resizable and their positions can be easily set by your user.
React-Grid-Layout - for resizable & draggable container
const ClockWidget = {
id : 'clock',
Component : Clock,
}
Hurraa!!! ,you have just created 'Clock' widget , ready to use in dashboard.
// unique identifier for widget ,
// if you'll repeat id then components with same id will overlap each-other
// you can create widgets using same component with different ids
id : string // Required
// if you want to pass parameters to your component, for some special behaviour,
// you can just wrap it inside function like,. () => <Clock digital />
// It is useful when you want to create different widgets from one component based
// on passed parameters
Component : object // Required
// background color of widget container (In case of transparancy or underflow)
// default = no-color/transparant
backgroundColor : string
// It is interval by which widget will get refreshed by dashboard.
// You need to use (refreshHook)* inside your component
// for using this feature
refreshInterval = number (in milli-seconds / 10e-3 seconds )
* : refresh hook is kind of hook which will be altered every time based on passed time interval. For Class Component You can use it inside useEffect hook as dependency to refresh for functional component. example of refresh hook is provided in below link refreshHook
following properties are in terms of custom unit metrix used by dashboard (not in pixels)
// as name says, prefered x position from left
// default = 0
preferedX = number (units*)
// prefered y position from top
// default = 0
preferedY = number (units*)
// minimum width of the widget
// default = MULTIPLIER (**)
minWidth = number (units*)
// maximum width of the widget
// default = INFINITE (**)
maxWidth = number (units*)
// minimum height of the widget
// default = MULTIPLIER (**)
minHeight = number (units*)
// maximum height of the widget
// default = INFINITE (**)
maxHeight = number (units*)
* : in units
** : for more info, take a look at Unit Methodology section
You can see Code Samples for widget on following links:
// array of widgets( take a look at create widget section )
widgets = array of object // Required
// css for dashboard
// default = {}
dashboardStyle = object
// background color for css
// default = 'pink'
backgroundColor = string
// background color for widget container
// default = ''
widgetBackgroundColorGeneral = string
// you can specify fixed Height for dashboard
// default = 0 means adaptive height
// under development
fixedHeight = number
// This flag is for gravity of dashboard
// default = false , means no gravity - widgets will float on dashboard
// gravity defines widgets flow direction
// default = false
enableGravity = number,
// you can specify flow direction here
// default = false , means widgets will flow in top direction
// if true widget will flow in left to right direction
// default = false
leftGravity = boolean
// following are margins and paddings ( in pixels ) for dashboard and widgets
// default = 10px (for all)
widgetMarginLeftRight = number
widgetMarginTopBottom = number
dashboardLeftPadding = number
dashboardTopPadding = number
// this property refers to behaviour of widgets
// when user drags widget and it passes through
// another widget, true means other widgets will not move
// for create space for holded widget
// default = false
preventCollision = boolean
-DashboardWithEditKey has following properties to configure other than common properties
// Unique identifier for dashboard
// it will be used for store dashboard state into
// localStorage, if storage functions are not passed
id = string
// It is function which should return jsx to render button
// Using this you can inject your own button component
// withing this component to match your application theme
// default = it will render simple html button in case of undefined / error
EditButton = function // () => { return (jsx for button)}
// You can pass function which will be called
// when dashboard need to save state
// default = it will try to store state in localStorage
saveLayoutState = function // ( id , state ) => { }
// You can pass function which will be used to retrieve state of layout
// default = it will try to fetch state from localStorage
retrieveLayoutState = function // ( id ) => { return state }
// It is function which should return jsx to render button
// Using this you can inject your own button component within
// this component to match your application theme
// default = it will render simple html button in case of undefined or any error
EditButton = function // () => { return (jsx for button)}
// It is function which should return jsx to render button
// Using this you can inject your own button component within
// this component to match your application theme
// default = it will render simple html button in case of undefined or any error
AddButton: PropTypes.func
// It is function which should return jsx to render button
// Using this you can inject your own button component within
// this component to match your application theme
// default = it will render simple html button in case of undefined or any error
SaveButton: PropTypes.func
// It is function which should return jsx to render button
// Using this you can inject your own container within
// this component to show widgets e.g. drawer / modal
// default = it will render simple html div in case of undefined or any error
WidgetMenuContainer: PropTypes.func
// style for widget menu if not passed WidgetMenuContainer
widgetMenuStyle = object
// Which widgets should be rendered initially
initialWidgetIds: array of widget ids // Required
// You can pass function which will be called
// when dashboard need to save state
// default = it will try to store state in localStorage
saveLayoutState = function // ( id , state ) => { }
// You can pass function which will be used to retrieve state of layout
// default = it will try to fetch state from localStorage
retrieveLayoutState = function // ( id ) => { return state }
It is the base component for all other complex components. So yup , you can create custom dashboard using this component. It provides you basic container for widgets, you can play with it and create awesome custom dashboard as you like
-Dashboard has following properties to configure
// layout for widget on dashboard
// this is state of the dashboard all the lifetime of the dashboard
// you can set it externally from anywhere
layoutsState = object // Required
// pair of layoutsState and setLayoutsState should be passed for
// responsive functionality
// function to set layoutState
setLayoutsState = function // Required // ( state ) => { }
// It specify , if dashboard is editable or not
// default = false
editable = boolean
// If you pass this function, it'll get called on close event of widget
// it will provide you host widget as parameter
onRemoveWidget = function // ( widget ) => { }
Thank you!!!!!!!!!!!!!!!!!!!! Back To Top ↑
FAQs
Dashboard with flexible layout of widgets
The npm package react-dashboard-lib receives a total of 12 weekly downloads. As such, react-dashboard-lib popularity was classified as not popular.
We found that react-dashboard-lib demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.