{"id":15572941,"url":"https://github.com/lgkonline/react-bootstrap-ribbon","last_synced_at":"2025-10-04T17:44:53.067Z","repository":{"id":18498437,"uuid":"84448959","full_name":"lgkonline/react-bootstrap-ribbon","owner":"lgkonline","description":"A ribbon menu inspired by Microsoft for React using Bootstrap","archived":false,"fork":false,"pushed_at":"2024-01-25T05:24:05.000Z","size":8612,"stargazers_count":31,"open_issues_count":21,"forks_count":11,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-15T06:14:33.124Z","etag":null,"topics":["bootstrap","bootstrap-ribbon","bootstrap4","css","javascript","microsoft","react","ribbon","ribbon-interface","ribbon-menu"],"latest_commit_sha":null,"homepage":"http://ribbon.lgk.io/","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/lgkonline.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":"2017-03-09T14:07:35.000Z","updated_at":"2025-02-18T11:30:48.000Z","dependencies_parsed_at":"2024-06-21T16:01:07.794Z","dependency_job_id":"fec3496a-86d8-4e25-8d66-4d28eb259f60","html_url":"https://github.com/lgkonline/react-bootstrap-ribbon","commit_stats":{"total_commits":36,"total_committers":3,"mean_commits":12.0,"dds":"0.38888888888888884","last_synced_commit":"79efbdb2ad0e42547eff566220aa89fa1b1600e8"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lgkonline%2Freact-bootstrap-ribbon","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lgkonline%2Freact-bootstrap-ribbon/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lgkonline%2Freact-bootstrap-ribbon/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lgkonline%2Freact-bootstrap-ribbon/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lgkonline","download_url":"https://codeload.github.com/lgkonline/react-bootstrap-ribbon/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249016641,"owners_count":21198833,"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":["bootstrap","bootstrap-ribbon","bootstrap4","css","javascript","microsoft","react","ribbon","ribbon-interface","ribbon-menu"],"created_at":"2024-10-02T18:08:54.188Z","updated_at":"2025-10-04T17:44:47.991Z","avatar_url":"https://github.com/lgkonline.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Bootstrap Ribbon\n\nGet a Microsoft inspired Ribbon menu for your React app. It uses Bootstrap 4 components.\\\n[Find React Bootstrap Ribbon on NPM.](https://www.npmjs.com/package/react-bootstrap-ribbon)\n\n[![npm version](https://img.shields.io/npm/v/react-bootstrap-ribbon.svg)](https://www.npmjs.com/package/react-bootstrap-ribbon)\n\n\u003ch2\u003eDesktop preview\u003c/h2\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/lgkonline/react-bootstrap-ribbon/master/preview_desktop.png\" style=\"max-width:100vw\" alt=\"Ribbon menu on desktop\"/\u003e\n\n\u003ch2\u003eMobile preview\u003c/h2\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/lgkonline/react-bootstrap-ribbon/master/preview_mobile.png\" width=\"350\" alt=\"Ribbon menu on mobile\" style=\"float:right\"/\u003e\n\n\u003ch2\u003eInstallation\u003c/h2\u003e\n\n\u003cp\u003e\nAdd it with NPM:\u003cbr\u003e\n\u003ccode\u003enpm i -S react-bootstrap-ribbon\u003c/code\u003e\n\u003c/p\u003e\n\n\u003cp\u003e\nAfter that you can import the components:\u003cbr\u003e\n\u003ccode\u003eimport {Ribbon, RibbonGroup, RibbonGroupItem, RibbonButton} from \"react-bootstrap-ribbon\";\u003c/code\u003e\n\u003c/p\u003e\n\n\u003cp\u003e\nMake sure you also embed the CSS:\u003cbr\u003e\n\u003ccode\u003eimport \"react-bootstrap-ribbon/dist/react-bootstrap-ribbon.css\";\u003c/code\u003e\n\u003c/p\u003e\n\n\n\u003ch2\u003eUsage\u003c/h2\u003e\n\nYour code could look like this:\n\n```javascript\nimport React, { Component } from \"react\";\nimport { Ribbon, RibbonGroup, RibbonGroupItem, RibbonButton } from \"react-bootstrap-ribbon\";\n\n// In this example Bootsrap is installed via NPM. Here it gets imported from the \"./node_modules\" folder:\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport \"react-bootstrap-ribbon/dist/react-bootstrap-ribbon.css\";\n\nclass App extends Component {\n    render() {\n        return (\n            \u003cdiv className=\"container\"\u003e\n                {/* \n                    `breakpoint` prop is optional and defines when to switch between mobile and desktop view. \n                    Possible values: \"sm\", \"md\", \"lg\", \"xl\", default: \"md\"\n                    `height` is also optional. Default is \"8rem\".\n                */}\n                \u003cRibbon breakpoint=\"lg\" height=\"8rem\"\u003e\n                    \u003cRibbonGroup title=\"Clipboard\" colClass=\"col-3\"\u003e\n                        \u003cRibbonGroupItem colClass=\"col-4\" onClick={() =\u003e alert(\"Hello from Ribbon button!\")}\u003e\n                            \u003cRibbonButton\u003e\n                                ✏️\n                                \u003cdiv\u003eEdit\u003c/div\u003e\n                            \u003c/RibbonButton\u003e\n                        \u003c/RibbonGroupItem\u003e\n\n                        {/* more Ribbon group items */}\n                    \u003c/RibbonGroup\u003e\n\n                    {/* more Ribbon groups */}\n                \u003c/Ribbon\u003e\n            \u003c/div\u003e\n        );\n    }\n}\n\nexport default App;\n```\n\n\u003ch2\u003eRun an example\u003c/h2\u003e\nClone this repo on your PC. After that install all dependencies with \u003ccode\u003enpm i\u003c/code\u003e.\u003cbr\u003e\nThen run \u003ccode\u003enpm start\u003c/code\u003e and you should see the example in your browser. You can see the code under \u003ccode\u003e./docs/src/index.js\u003c/code\u003e.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flgkonline%2Freact-bootstrap-ribbon","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flgkonline%2Freact-bootstrap-ribbon","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flgkonline%2Freact-bootstrap-ribbon/lists"}