{"id":21861194,"url":"https://github.com/deecewan/dev-bar","last_synced_at":"2026-04-13T04:33:23.189Z","repository":{"id":94844913,"uuid":"72442893","full_name":"deecewan/dev-bar","owner":"deecewan","description":"A development toolbar for React projects.  WIP.","archived":false,"fork":false,"pushed_at":"2016-10-31T15:19:15.000Z","size":181,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-28T06:02:42.646Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/deecewan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-10-31T14:12:16.000Z","updated_at":"2016-10-31T15:25:47.000Z","dependencies_parsed_at":"2023-07-24T14:37:54.406Z","dependency_job_id":null,"html_url":"https://github.com/deecewan/dev-bar","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/deecewan/dev-bar","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deecewan%2Fdev-bar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deecewan%2Fdev-bar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deecewan%2Fdev-bar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deecewan%2Fdev-bar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/deecewan","download_url":"https://codeload.github.com/deecewan/dev-bar/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deecewan%2Fdev-bar/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278227816,"owners_count":25951992,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-03T02:00:06.070Z","response_time":53,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":[],"created_at":"2024-11-28T03:10:30.523Z","updated_at":"2025-10-03T21:10:50.327Z","avatar_url":"https://github.com/deecewan.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# dev-bar\n\n\u003e A toolbar to connect your server to React\n\n![image](https://cloud.githubusercontent.com/assets/4755785/19855680/9510589a-9fc1-11e6-9a54-3112a2055b59.png)\n\nThe toolbar shows a few key stats out of the box.  If you're using express as a backend, you'll \nautomatically get the request time (`req`) and response time (`res`).  This one is probably less\nhelpful, but it's there.  Also included by default is the currently checked out git branch.\n\n## Usage\n\n### Getting Started\n\nInstall with `yarn add dev-bar` or `npm install --save dev-bar`.\n\n### React\n\nImport the component, and add it to your root component.  It can go anywhere, but inside `App` is probably more semantic.\n\n```jsx\nimport { DevToolbar } from 'dev-bar';\n...\n\nexport default props =\u003e {\n  \u003cdiv\u003e\n    \u003cp\u003eMy Cool App\u003c/p\u003e\n    \u003cDevToolbar /\u003e\n  \u003c/div\u003e\n}\n```\n\nTo not include the entire package in your client (until treeshaking gets better in webpack), you can also do \n\n```js\nimport DevToolbar from 'dev-bar/dist/DevToolbar';\n```\n\n### Express\n\nThe toolbar exposes a pretty basic middleware on the express side.\n\n```js\nimport { middleware as devToolbarMiddleware } from 'dev-bar';\n...\n\nconst app = express();\napp.use(devToolbarMiddleware());\n```\n\nSimilarly to above, you can import this directly to reduce the size of your dependencies, but this shouldn't make too much different on a server.\n\n```js\nimport devToolbarMiddleware from 'dev-bar/dist/middleware';\n```\n\nTo add your own values, pass an object into the middleware.  You can either pass in raw values, or functions.  One day soon, promises, too.  If you want to get things out of the req or res, they're passed into your functions.\n\n```js\napp.use(devToolbarMiddleware({\n  loggedIn: req =\u003e !!req.user,\n  apiVersion: 2,\n}));\n```\n\nThis will add `loggedIn: true / apiVersion: 2` to your toolbar.  Any values that exist as null or undefined will show up as 'undefined'.\n\n### Not using Express?\n\nYou can use whatever backend you like, but you'll need to implement the socket connection yourself.\nThe default port is 3001. If you want a different port, pass in a `port` prop to the Toolbar component.  You just need to emit an object under 'devUpdate'.  Each key in the object will become a key in the toolbar.  Keep it light.\n\nTo bind your socket to a different port, i.e. `http://localhost:8080`:\n```jsx\n// import the DevToolbar component\n\u003cDevToolbar port={8080} /\u003e\n```\n\nAlternatively, if you want to specify a different URL completely, pass in the `url` prop.  Note: this will override the port, if any is passed in.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeecewan%2Fdev-bar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdeecewan%2Fdev-bar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeecewan%2Fdev-bar/lists"}