{"id":24107614,"url":"https://github.com/bclehmann/dashboard-widgets","last_synced_at":"2026-04-10T12:33:02.889Z","repository":{"id":48556226,"uuid":"265034057","full_name":"bclehmann/dashboard-widgets","owner":"bclehmann","description":"An npm package providing several react components to help create a clean dashboard easily and quickly.","archived":false,"fork":false,"pushed_at":"2021-07-20T16:24:03.000Z","size":252,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-08-17T18:44:57.803Z","etag":null,"topics":["dashboard","javascript","mit-license","npm","open-source","react","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/dashboard-widgets","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bclehmann.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-05-18T18:59:35.000Z","updated_at":"2021-07-20T16:09:29.000Z","dependencies_parsed_at":"2022-08-31T20:00:46.135Z","dependency_job_id":null,"html_url":"https://github.com/bclehmann/dashboard-widgets","commit_stats":null,"previous_names":["benny121221/dashboard-widgets"],"tags_count":20,"template":false,"template_full_name":null,"purl":"pkg:github/bclehmann/dashboard-widgets","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bclehmann%2Fdashboard-widgets","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bclehmann%2Fdashboard-widgets/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bclehmann%2Fdashboard-widgets/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bclehmann%2Fdashboard-widgets/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bclehmann","download_url":"https://codeload.github.com/bclehmann/dashboard-widgets/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bclehmann%2Fdashboard-widgets/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31642836,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-10T07:40:12.752Z","status":"ssl_error","status_checked_at":"2026-04-10T07:40:11.664Z","response_time":98,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dashboard","javascript","mit-license","npm","open-source","react","typescript"],"created_at":"2025-01-10T22:39:47.160Z","updated_at":"2026-04-10T12:33:02.866Z","avatar_url":"https://github.com/bclehmann.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![npm version](https://badge.fury.io/js/dashboard-widgets.svg)](https://badge.fury.io/js/dashboard-widgets)\n![npm bundle size](https://img.shields.io/bundlephobia/min/dashboard-widgets)\n![npm total downloads](https://img.shields.io/npm/dt/dashboard-widgets)\n![npm weekly downloads](https://img.shields.io/npm/dw/dashboard-widgets)\n![platform react](https://img.shields.io/badge/platform-react-blue)\n![mit license](https://img.shields.io/npm/l/dashboard-widgets)\n\n\n# Installation\n```\n$ npm i dashboard-widgets\n```\n\nThen simply import the modules you want:\n\n```ts\nimport {Badge} from dashboard-widgets\n```\n\nThe details of how to use each module are below\n\n# Features\n- Auto-apply formatting to tables\n- Badges\n- Phone Element\n- Dark Mode Detect\n\n## Tables\n\nUse `import { FormatTableRows } from \"dashboard-widgets\"`\n\nPass 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).\n\n```tsx\n\u003ctable className=\"table bigText\"\u003e\n  \u003ctr\u003e\n    \u003cth\u003eColumn 1\u003c/th\u003e\n    \u003cth\u003eColumn 2\u003c/th\u003e\n    \u003cth\u003eColumn 3\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003cFormatTableRows data={[\n      [\"1\", \"a\", 1.0],\n      [2, \"b\", 2.0]\n    ]}\n    formatRule={(cell) =\u003e typeof cell == \"number\" ? \"displayRed\" : \"\"}\n    formatRuleRow={(row)=\u003e typeof row[0] == \"number\" ? \"displayGreen\" : \"\"}\n  /\u003e\n\u003c/table\u003e\n```\n\nWith the following CSS classes:\n\n```css\n.displayRed {\n  color: red;\n}\n\n.displayGreen {\n  color: green;\n}\n```\n\nProduces this output:\n\u003cimg src=\"https://i.imgur.com/gXmmRH0.png\" alt=\"Table1\"\u003e\n\nNote 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/\n\n## Badges\n\u003cimg src=\"https://i.imgur.com/hqXI6Yb.png\" alt=\"Badge1\" width=\"200\" height=\"200\"\u003e\n\n\nThis can be done with:\n```tsx\nimport {Badge} from \"dashboard-widgets\"\n\u003cBadge number={2} subtitle=\"Score\" stroke=\"red\" /\u003e\n```\nSimilarly, you can have a filled badge like the following:\n\n\u003cimg src=\"https://i.imgur.com/SXSSkyp.png\" alt=\"Badge2\" width=\"200\" height=\"220\"\u003e\n\n```tsx\nimport {Badge} from \"dashboard-widgets\"\n\u003cBadge number={102} subtitle=\"Score\" stroke=\"#a0f0a0\" type=\"fill\" /\u003e\n```\n## Phone Element\n\nYou can add elements within a phone screen like this:\n\n\u003cimg src=\"https://i.imgur.com/cWaZ2X4.png\" alt=\"Phone1\"\u003e\n\nThe code here is simple:\n```tsx\nimport {Phone} from 'dashboard-widgets'\n\u003cPhone\u003e\n  //Your content here\n\u003c/Phone\u003e\n```\nYou can create a smaller and more minimalist phone by passing a truthy value to the `small` prop:\n\n\u003cimg src=\"https://i.imgur.com/5tNaTeh.png\" alt=\"Phone2\"\u003e\n\n```tsx\nimport {Phone} from 'dashboard-widgets'\n\u003cPhone small={true}\u003e\n  //Your content here\n\u003c/Phone\u003e\n```\n\n## Dark Mode Detect\n\nIt 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:\n```tsx\nimport { isDarkMode } from \"dashboard-widgets\"\nif(isDarkMode){\n  //Code\n}\n```\n# Links\n- NPM Page: https://www.npmjs.com/package/dashboard-widgets\n- Github Repo: https://github.com/Benny121221/dashboard-widgets\n\n\n# Contribution\nIf you're feeling generous, feel free to put in a PR. This is all under the MIT License.\n\n---\n![Logo](https://raw.githubusercontent.com/Benny121221/images/master/logo_full.png)\n\n# Made by Where 1\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbclehmann%2Fdashboard-widgets","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbclehmann%2Fdashboard-widgets","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbclehmann%2Fdashboard-widgets/lists"}