Installation
$ npm i dashboard-widgets
Then simply import the modules you want:
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).
<table className="table bigText">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<FormatTableRows data={[
["1", "a", 1.0],
[2, "b", 2.0]
]}
formatRule={(cell) => typeof cell == "number" ? "displayRed" : ""}
formatRuleRow={(row)=> typeof row[0] == "number" ? "displayGreen" : ""}
/>
</table>
With the following CSS classes:
.displayRed {
color: red;
}
.displayGreen {
color: green;
}
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:
import {Badge} from "dashboard-widgets"
<Badge number={2} subtitle="Score" stroke="red" />
Similarly, you can have a filled badge like the following:
import {Badge} from "dashboard-widgets"
<Badge number={102} subtitle="Score" stroke="#a0f0a0" type="fill" />
Phone Element
You can add elements within a phone screen like this:
The code here is simple:
import {Phone} from 'dashboard-widgets'
<Phone>
//Your content here
</Phone>
You can create a smaller and more minimalist phone by passing a truthy value to the small
prop:
import {Phone} from 'dashboard-widgets'
<Phone small={true}>
//Your content here
</Phone>
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:
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.