https://github.com/edgarberm/dashup
⚛️ React Dashboard Component
https://github.com/edgarberm/dashup
dashboard react reactjs reactjs-components typescript ui ui-components
Last synced: 12 days ago
JSON representation
⚛️ React Dashboard Component
- Host: GitHub
- URL: https://github.com/edgarberm/dashup
- Owner: edgarberm
- License: mit
- Created: 2023-05-31T10:44:46.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-06-12T08:28:28.000Z (over 1 year ago)
- Last Synced: 2025-12-06T02:53:45.207Z (about 2 months ago)
- Topics: dashboard, react, reactjs, reactjs-components, typescript, ui, ui-components
- Language: TypeScript
- Homepage: https://edgarberm.github.io/dashup/
- Size: 2.17 MB
- Stars: 12
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# 
Dashup
#### Built with 🖤 and some lines of React and TypeScript
$$
[](https://badge.fury.io/js/dashup)
[](http://makeapullrequest.com)
[](https://coveralls.io/github/builtbyedgar/dashup?branch=main)
Highly customizable and performant **React** components specifically designed for creating interactive dashboards. With a focus on simplicity and flexibility, this library empowers developers to effortlessly build stunning dashboard interfaces.
## Examples
See in action in the [Storybook](https://builtbyedgar.github.io/dashup/)
#### More examples (soon)
- Codesandbox
- Stackblitz
## Features
Dashup provides a simple and versatile solution for building interactive dashboards in your **React** applications. With its intuitive API and extensive customization options, you can create dynamic and visually dope dashboards in no time.
Whether you need draggable and resizable widgets for flexible layout arrangements, fixed widgets, or a serialized layout for saving and loading dashboard configurations, this component library has you covered.
#### ⚛️ 100% React & TypeScript
The components are built using [React v18](https://github.com/facebook/react/) and [TypeScript](https://www.typescriptlang.org/), ensuring type safety and a seamless integration with your existing projects.
#### 🍿 Zero dependencies
The library has no external dependencies, making it lightweight and easy to manage.
#### 🎛️ Draggable and resizable widgets
Intuitively drag and rearrange widgets within the dashboard to suit your needs. Resize widgets to optimize the layout and maximize content visibility.
#### ⏸️ Fixes widgets
Create widgets that can't be resized or moved, not even by other widgets!
#### 🗂️ Serialized layout
Save and load the dashboard layout effortlessly using a serialized format.
#### 🎨 Fully customizable
Customize the appearance, behavior, and styling of the components to match your application's branding and requirements.
#### 🔋 High performance
Using the best practices for React performance optimization, the library ensures smooth rendering and fluid user experiences.
#### 📘 Storybook integration
Uses the power of [Storybook](https://storybook.js.org/) for easy development and interactive documentation.
## Requirements
- React >= 18
- ReactDOM >= 18
## Usage
Getting started with the **Dashup** is quick and straightforward. Follow the steps below to install the package and begin using the components in your project.
### Installation
To install the **Dashup**, use the package manager of your choice:
#### NPM
```bash
npm install dashup
```
#### Yarn
```bash
yarn add dashup
```
#### PNPM
```bash
pnpm install dashup
```
### Dashboard component
The `` component exposes a simple but effective API:
```ts
interface DashboardProps {
/** The widget list WidgetProps[] */
widgets: Layout
/** number of columns */
columns?: number
/** the rows height */
rowHeight?: number
/** the margin between widgets */
margin?: [number, number]
/** packing the layout */
packing?: boolean
/** the className for the placeholder (ghost) */
placeholderClassName?: string
/** callback method when a widget is moved, resized or deleted */
onChange?: (widgets: Layout) => void
/** callback method when the dashboard (or window) is resized */
onResize?: () => void
}
```
```tsx
const widget: WidgetProps = {
id: uuidv4(),
x: 0,
y: 2,
width: 3,
height: 2,
title: 'Widget 1',
draggable: true,
removible: true,
stationary: false,
component: ,
}
const widgets: Layout = [widget, ...]
```
#### Widget props
```ts
interface WidgetProps {
id: string
/** In columns */
x: number
/** In rows */
y: number
/** In columns */
width: number
/** In rows */
height: number
/** In columns */
minWidth?: number
/** In rows */
minHeight?: number
maxWidth?: number
maxHeight?: number
/** make widget fixed */
fixed?: boolean
/** make widget draggable */
draggable?: boolean
/** make widget resizable */
resizable?: boolean
/** the widget title */
title: string
/** the component that will be rendered into the widget */
component?: JSX.Element
/** the component that will be the wiidget toolbar */
toolbar?: ReactElement
}
```
#### Custom toolbar props
```ts
interface CustomToolbarProps {
id?: string
title?: string
className?: string
}
```
## Todo's
I'm actively seeking help to ensure the quality and reliability of the library through comprehensive testing. If you have experience with testing React components and would like to contribute, I would greatly appreciate your assistance. Whether it's writing unit tests, integration tests, or providing feedback on existing tests.
As you can see, there are quite a few tasks on the to-do list... Feel like helping me out with one?
Your contributions will be welcome!
- [ ] ⚡️ Extra features
- [ ] 💻 Codesandbox and Stackblitz examples
- [ ] 📄 Docuentation
- [ ] 📄 Contributing
- [ ] 🔬 Testing
## Contributing
Please, help me for test the component 🙏🏻
I welcome contributions from the community! If you'd like to contribute to this project, please review the [contribution guidelines](CONTRIBUTING.md) and submit a pull request.
## License
This project is licensed under the [MIT](LICENSE.md) License.