{"id":21334320,"url":"https://github.com/timmikeladze/react-devbar","last_synced_at":"2025-04-15T01:42:51.246Z","repository":{"id":260511713,"uuid":"881104684","full_name":"TimMikeladze/react-devbar","owner":"TimMikeladze","description":"📏 A customizable floating toolbar for React applications. Build and integrate your own dev tools with a draggable interface inspired by the Vercel toolbar. Perfect for adding debugging panels, theme controls, and other development utilities for your app.","archived":false,"fork":false,"pushed_at":"2025-01-01T09:41:53.000Z","size":244,"stargazers_count":2,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-05T13:51:42.513Z","etag":null,"topics":["dev-tools","developer-tools","react-devbar","react-devtools","react-toolbar"],"latest_commit_sha":null,"homepage":"https://timmikeladze.github.io/react-devbar/","language":"TypeScript","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/TimMikeladze.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":"2024-10-30T23:07:12.000Z","updated_at":"2025-02-04T11:21:15.000Z","dependencies_parsed_at":null,"dependency_job_id":"9186282f-91dd-4952-a35a-ffc2df420db8","html_url":"https://github.com/TimMikeladze/react-devbar","commit_stats":null,"previous_names":["timmikeladze/react-devbar"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TimMikeladze%2Freact-devbar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TimMikeladze%2Freact-devbar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TimMikeladze%2Freact-devbar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TimMikeladze%2Freact-devbar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TimMikeladze","download_url":"https://codeload.github.com/TimMikeladze/react-devbar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248991511,"owners_count":21194893,"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","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":["dev-tools","developer-tools","react-devbar","react-devtools","react-toolbar"],"created_at":"2024-11-21T23:20:04.074Z","updated_at":"2025-04-15T01:42:51.229Z","avatar_url":"https://github.com/TimMikeladze.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 📏 react-devbar\n\nA customizable floating toolbar for React applications. Build and integrate your own dev tools with a draggable interface inspired by the Vercel toolbar. Perfect for adding debugging panels, theme controls, and other development utilities for your app. Check out the [Storybook](https://timmikeladze.github.io/react-devbar/) for a live demo.\n\n![Screenshot of react-devbar](docs/screenshot.png)\n\n\n## ✨ Features\n\n- ✅ Fully customizable, with custom icons, styles, and components.\n- ✅ Toggle it with a hotkey.\n- ✅ Drag it anywhere on the screen.\n- ✅ Use default styles or style it yourself. Seamlessly integrates with Tailwind and supports dark-mode.\n\n\n## 📡 Install\n\n```console\nnpm install react-devbar\n\nyarn add react-devbar\n\npnpm add react-devbar\n```\n\n\u003e 👋 Hello there! Follow me [@linesofcode](https://twitter.com/linesofcode) or visit [linesofcode.dev](https://linesofcode.dev) for more cool projects like this one.\n\n## 🚀 Getting started\n\n```tsx\nimport { DevBar } from \"react-devbar\";\nimport { Bug, Palette, Settings } from \"lucide-react\";\n// if you're not using Tailwind, you can import default styles\nimport \"react-devbar/styles.css\";\n\nconst tools = [\n\t{\n\t\ticon: Settings,\n\t},\n\t{\n\t\ticon: Palette,\n\t},\n\t{\n\t\ticon: Bug,\n\t},\n];\n\n\n// somewhere in your app render:\n\u003cDevBar tools={tools} /\u003e\n```\n\n## Available props\n\n### DevBarTool\n\nEach tool in the `tools` array can have the following properties:\n\n| Property    | Type                  | Required | Description                                                |\n|------------|----------------------|----------|------------------------------------------------------------|\n| name       | string               | No       | The name of the tool (used for tooltips)                   |\n| icon       | React.ElementType    | Yes      | The icon component to display                              |\n| Component  | React.ComponentType  | No       | The component to render when the tool is selected          |\n\n### DevBarProps\n\n| Property                  | Type                                      | Default     | Description                                                    |\n|--------------------------|-------------------------------------------|-------------|----------------------------------------------------------------|\n| tools                    | Tool[]                                    | -           | Array of tools to display in the toolbar                        |\n| orientation              | \"horizontal\" \\| \"vertical\"                | \"horizontal\"| Orientation of the toolbar                                      |\n| defaultPosition          | Position \\| { x: number; y: number }      | \"bottom-right\" | Initial position of the toolbar                             |\n| defaultOpen              | boolean                                   | false       | Whether the toolbar is initially open                           |\n| hotkey                   | string                                    | -           | Keyboard shortcut to toggle the toolbar                         |\n| hotKeyOptions            | Options                                   | -           | Options for the hotkey behavior                                 |\n| CommandIcon             | React.ElementType                         | -           | Custom command icon component                                   |\n| GripIcon                | React.ElementType                         | -           | Custom grip icon component                                      |\n| CloseIcon               | React.ElementType                         | -           | Custom close icon component                                     |\n| containerClassName      | string                                    | -           | Class name for the main container                               |\n| toolbarClassName        | string                                    | -           | Class name for the toolbar                                      |\n| toolbarContentClassName | string                                    | -           | Class name for the toolbar content                              |\n| moveButtonClassName     | string                                    | -           | Class name for the move button                                  |\n| toolsContainerClassName | string                                    | -           | Class name for the tools container                              |\n| toolButtonClassName     | string                                    | -           | Class name for individual tool buttons                          |\n| controlsContainerClassName | string                                 | -           | Class name for the controls container                           |\n| closeButtonClassName    | string                                    | -           | Class name for the close button                                 |\n| openButtonClassName     | string                                    | -           | Class name for the open button                                  |\n| ButtonComponent         | typeof Button                             | -           | Custom button component                                         |\n| TooltipComponent        | typeof Tooltip                            | -           | Custom tooltip component                                        |\n| TooltipTriggerComponent | typeof TooltipTrigger                     | -           | Custom tooltip trigger component                                |\n| TooltipContentComponent | typeof TooltipContent                     | -           | Custom tooltip content component                                |\n| TooltipProviderComponent| typeof TooltipProvider                    | -           | Custom tooltip provider component                               |\n| moveButtonLabel         | string                                    | -           | Accessibility label for the move button                         |\n| closeToolbarLabel       | string                                    | -           | Accessibility label for the close button                        |\n| openToolbarLabel        | string                                    | -           | Accessibility label for the open button                         |\n\n#### DevBarPosition Types\n\nThe `defaultPosition` prop accepts the following position values:\n\n- `\"top-left\"`\n- `\"top-center\"` \n- `\"top-right\"`\n- `\"bottom-left\"`\n- `\"bottom-center\"`\n- `\"bottom-right\"`\n- `\"center-left\"`\n- `\"center-right\"`\n- `\"center\"`\n\nOr an object with `x` and `y` coordinates for precise positioning.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimmikeladze%2Freact-devbar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftimmikeladze%2Freact-devbar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimmikeladze%2Freact-devbar/lists"}