https://github.com/bclehmann/dashboard-widgets
An npm package providing several react components to help create a clean dashboard easily and quickly.
https://github.com/bclehmann/dashboard-widgets
dashboard javascript mit-license npm open-source react typescript
Last synced: 2 months ago
JSON representation
An npm package providing several react components to help create a clean dashboard easily and quickly.
- Host: GitHub
- URL: https://github.com/bclehmann/dashboard-widgets
- Owner: bclehmann
- License: mit
- Created: 2020-05-18T18:59:35.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2021-07-20T16:24:03.000Z (almost 5 years ago)
- Last Synced: 2025-08-17T18:44:57.803Z (10 months ago)
- Topics: dashboard, javascript, mit-license, npm, open-source, react, typescript
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/dashboard-widgets
- Size: 246 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://badge.fury.io/js/dashboard-widgets)
# Installation
```
$ npm i dashboard-widgets
```
Then simply import the modules you want:
```ts
import {Badge} from dashboard-widgets
```
The details of how to use each module are below
# Features
- Auto-apply formatting to tables
- Badges
- Phone Element
- Dark Mode Detect
## Tables
Use `import { FormatTableRows } from "dashboard-widgets"`
Pass in data and a function to act as a formatRule. The `formatRule` prop takes in a cell and returns a classname as a string. `formatRuleRow` does the same thing but for a table row (represented as an array of cells).
```tsx
Column 1
Column 2
Column 3
typeof cell == "number" ? "displayRed" : ""}
formatRuleRow={(row)=> typeof row[0] == "number" ? "displayGreen" : ""}
/>
```
With the following CSS classes:
```css
.displayRed {
color: red;
}
.displayGreen {
color: green;
}
```
Produces this output:
Note that the `.table` class is from bootstrap. This example uses bootstrap styling but it is not required, nor is it a dependency of this project. Bootstrap is available here: https://getbootstrap.com/
## Badges
This can be done with:
```tsx
import {Badge} from "dashboard-widgets"
```
Similarly, you can have a filled badge like the following:
```tsx
import {Badge} from "dashboard-widgets"
```
## Phone Element
You can add elements within a phone screen like this:
The code here is simple:
```tsx
import {Phone} from 'dashboard-widgets'
//Your content here
```
You can create a smaller and more minimalist phone by passing a truthy value to the `small` prop:
```tsx
import {Phone} from 'dashboard-widgets'
//Your content here
```
## Dark Mode Detect
It is quite easy to detect that the client prefers dark/night mode from CSS. It can be cumbersome to do the same from Javascript. With this package, its as easy as pie:
```tsx
import { isDarkMode } from "dashboard-widgets"
if(isDarkMode){
//Code
}
```
# Links
- NPM Page: https://www.npmjs.com/package/dashboard-widgets
- Github Repo: https://github.com/Benny121221/dashboard-widgets
# Contribution
If you're feeling generous, feel free to put in a PR. This is all under the MIT License.
---
# Made by Where 1