{"id":16151525,"url":"https://github.com/justinmahar/vscode-react-bootstrap-snippets","last_synced_at":"2025-03-18T19:31:29.325Z","repository":{"id":152466898,"uuid":"366860458","full_name":"justinmahar/vscode-react-bootstrap-snippets","owner":"justinmahar","description":"📝 VS Code snippets for the React-Bootstrap library. Over 30k installs!","archived":false,"fork":false,"pushed_at":"2023-12-08T18:23:19.000Z","size":10868,"stargazers_count":10,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-28T11:49:36.737Z","etag":null,"topics":["bootstrap","react","react-bootstrap","reactjs","reactstrap","snippets","vscode"],"latest_commit_sha":null,"homepage":"https://marketplace.visualstudio.com/items?itemName=justinmahar.react-bootstrap-snippets","language":null,"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/justinmahar.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2021-05-12T21:39:29.000Z","updated_at":"2024-09-21T15:55:17.000Z","dependencies_parsed_at":null,"dependency_job_id":"ae8b9288-a97b-41e7-98d4-fa1520d18625","html_url":"https://github.com/justinmahar/vscode-react-bootstrap-snippets","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justinmahar%2Fvscode-react-bootstrap-snippets","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justinmahar%2Fvscode-react-bootstrap-snippets/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justinmahar%2Fvscode-react-bootstrap-snippets/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justinmahar%2Fvscode-react-bootstrap-snippets/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/justinmahar","download_url":"https://codeload.github.com/justinmahar/vscode-react-bootstrap-snippets/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243945561,"owners_count":20372897,"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","react","react-bootstrap","reactjs","reactstrap","snippets","vscode"],"created_at":"2024-10-10T00:57:34.611Z","updated_at":"2025-03-18T19:31:28.407Z","avatar_url":"https://github.com/justinmahar.png","language":null,"funding_links":["https://github.com/sponsors/justinmahar","https://paypal.me/thejustinmahar/5","https://paypal.me/thejustinmahar/15","https://paypal.me/thejustinmahar/25"],"categories":[],"sub_categories":[],"readme":"# React-Bootstrap Snippets\n\n## Overview \n\nThis [extension](https://marketplace.visualstudio.com/items?itemName=justinmahar.react-bootstrap-snippets) includes 806 [React-Bootstrap](https://react-bootstrap.github.io/) snippets for VS Code.\n\nBuild apps with React-Bootstrap at your fingertips.\n\nThis extension supports:\n\n- 🙌 All `react-bootstrap` components. The complete picture.\n- 📦 `import` snippets, for quick and easy importing.\n- 💁‍♀️ Example snippets from the docs for convenience.\n- 🧰 [Bootstrap utility CSS class](https://getbootstrap.com/docs/5.2/utilities/api/) snippets for even more convenience!\n\n**Just type `rb` and press \u003ckbd\u003eCtrl\u003c/kbd\u003e+\u003ckbd\u003eSpace\u003c/kbd\u003e for autocompletion. VS Code will autocomplete the component you need.**\n\n![Demo](https://raw.githubusercontent.com/justinmahar/vscode-react-bootstrap-snippets/master/images/demo.gif)\n\nRead below for more information and gif demos.\n\n\u003e Loving it? **[Rate it here!](https://marketplace.visualstudio.com/items?itemName=justinmahar.react-bootstrap-snippets\u0026ssr=false#review-details)**\n\n## Donate \n\nIf this project helped you, please consider buying me a coffee. Your support is much appreciated!\n\n\u003ca href=\"https://github.com/sponsors/justinmahar\"\u003e\n  \u003cimg src=\"https://justinmahar.github.io/react-kindling/support/sponsor.png\" alt=\"Sponsor via GitHub\" height=\"35\" /\u003e\n\u003c/a\u003e \u003ca href=\"https://paypal.me/thejustinmahar/5\"\u003e\n  \u003cimg src=\"https://justinmahar.github.io/react-kindling/support/coffee-1.png\" alt=\"Buy me a coffee\" height=\"35\" /\u003e\n\u003c/a\u003e \u003ca href=\"https://paypal.me/thejustinmahar/15\"\u003e\n  \u003cimg src=\"https://justinmahar.github.io/react-kindling/support/coffee-3.png\" alt=\"Buy me 3 coffees\" height=\"35\" /\u003e\n\u003c/a\u003e \u003ca href=\"https://paypal.me/thejustinmahar/25\"\u003e\n  \u003cimg src=\"https://justinmahar.github.io/react-kindling/support/coffee-5.png\" alt=\"Buy me 5 coffees\" height=\"35\" /\u003e\n\u003c/a\u003e\n\n## Table of Contents\n\n- [React-Bootstrap Snippets](#react-bootstrap-snippets)\n  - [Overview](#overview)\n  - [Donate](#donate)\n  - [Table of Contents](#table-of-contents)\n  - [📚 Supported languages (file extensions)](#-supported-languages-file-extensions)\n  - [react-bootstrap Support](#react-bootstrap-support)\n  - [📖 Snippets](#-snippets)\n    - [Component Snippets](#component-snippets)\n    - [Import Snippets](#import-snippets)\n      - [Individual Import Snippets](#individual-import-snippets)\n    - [Example Snippets](#example-snippets)\n    - [Alert and Modal Functions](#alert-and-modal-functions)\n    - [Table Utilities](#table-utilities)\n    - [Bootstrap Utility CSS Class Snippets](#bootstrap-utility-css-class-snippets)\n  - [A Note To You, The Developer](#a-note-to-you-the-developer)\n  - [Release Notes](#release-notes)\n\n## 📚 Supported languages (file extensions)\n- JavaScript (.js)\n- JavaScript React (.jsx)\n- TypeScript (.ts)\n- TypeScript React (.tsx)\n\n## react-bootstrap Support\n\n| Extension Version | react-bootstrap Version |\n| ----------------- | ----------------------- |\n| Latest            | `2.7.0` (Bootstrap 5.2) |\n| `1.0.9`           | `1.6.4` (Bootstrap 4.6) |\n\n\u003e In VS Code, press Cmd+Shift+P and run *Extension: Install Specific Version of Extension...* to install a specific version.\n\n## 📖 Snippets\n\n**All snippets start with `rb` for React-Bootstrap.**\n\nThere are 806 snippets available for components, imports, examples, and utility CSS classes. \n\nRead more on each below.\n\n### Component Snippets\n\nAll React-Bootstrap's components are supported.\n\nFor example, `rb:alert`, `rb:badge`, `rb:breadcrumb`, etc.\n\nWhere applicable, suggestions are made for which components to use inside a given component, such as `thead` and `tbody` inside a `Table`.\n\n### Import Snippets\n\nComponent import snippets are available for all React-Bootstrap components. \n\nAll imports begin with `rb:import` followed by the component name. For example, `rb:import:row` will import `Row`. \n\nSince it's such a common use case, you can also use `rb:import:grid` to import `Container`, `Row`, and `Col` all at once.\n\n![Imports](https://raw.githubusercontent.com/justinmahar/vscode-react-bootstrap-snippets/master/images/imports.gif)\n\n#### Individual Import Snippets\n\n[According to the docs](https://react-bootstrap.github.io/getting-started/introduction/#importing-components):\n\n\u003e You should import individual components like: `react-bootstrap/Button` rather than the entire library. Doing so pulls in only the specific components that you use, which can significantly reduce the amount of code you end up sending to the client.\n\nAll snippets for individual imports begin with `rb:import:only` followed by the component name. \n\nFor example, `rb:import:only:button`, `rb:import:only:grid`, etc.\n\n### Example Snippets\n\nWhere applicable, examples from the docs are provided as snippets. These can be very helpful as a starting point when working with more complex components, or for use as quick placeholders.\n\nExample snippets all end with `-example`. \n\nFor instance, `rb:alert-example` will insert an example `Alert` to build upon.\n\n![Examples](https://raw.githubusercontent.com/justinmahar/vscode-react-bootstrap-snippets/master/images/examples.gif)\n\n### Alert and Modal Functions\n\nFor convenience, function snippets are included for the show/hide functions needed for modals and dismissible alerts.\n\n![Functions](https://raw.githubusercontent.com/justinmahar/vscode-react-bootstrap-snippets/master/images/functions.gif)\n\nUse `rb:modal-functions` for the following:\n\n```tsx\nconst [showModal, setShowModal] = React.useState(false);\nconst handleCloseModal = () =\u003e setShowModal(false);\nconst handleShowModal = () =\u003e setShowModal(true);\n```\n\nAnd `rb:alert-dismissible-functions` for the following:\n\n```tsx\nconst [showAlert, setShowAlert] = React.useState(false);\nconst handleCloseAlert = () =\u003e setShowAlert(false);\nconst handleShowAlert = () =\u003e setShowAlert(true);\n```\n\nThese pair nicely with the snippets for `rb:modal` and `rb:alert-dismissible`.\n\n### Table Utilities\n\nThis extension includes utilities for tables so you can quickly build table headers and table rows.\n\nUse `rb:table-row-X` and `rb:table-header-row-X`, where `X` is the number of columns from 2-9, to quickly build rows in your `thead` and `tbody`.\n\n![Tables](https://raw.githubusercontent.com/justinmahar/vscode-react-bootstrap-snippets/master/images/tables.gif)\n\n### Bootstrap Utility CSS Class Snippets\n\nHandy snippets are included for all [Bootstrap utility CSS classes](https://getbootstrap.com/docs/5.2/utilities/api/).\n\nUse the `rb:utils` prefix to quickly look up and use any of Bootstrap's utility classes while building.\n\n![Utilities](https://raw.githubusercontent.com/justinmahar/vscode-react-bootstrap-snippets/master/images/rbutils.gif)\n\n## A Note To You, The Developer\n\nMy goal was to make this one of the best snippets extensions available to you. As such, I spent countless hours reading the docs to make this as great as I could, and I truly hope you find it useful.\n\nThat being said, if you find a bug or see a way to improve this extension, please feel free to [open an issue](https://github.com/justinmahar/vscode-react-bootstrap-snippets/issues) or submit a [pull request to the project](https://github.com/justinmahar/vscode-react-bootstrap-snippets).\n\nIf you found this extension helpful, consider **[rating it](https://marketplace.visualstudio.com/items?itemName=justinmahar.react-bootstrap-snippets\u0026ssr=false#review-details)**, **[give it a star ⭐️](https://github.com/justinmahar/vscode-react-bootstrap-snippets)** so others can find it, or **[buy me a coffee ☕️](https://paypal.me/thejustinmahar/5)** to show your appreciation.\n\nHappy coding 🖖\n\n## Release Notes\n\nSee the [CHANGELOG](https://marketplace.visualstudio.com/items/justinmahar.react-bootstrap-snippets/changelog) for release notes.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjustinmahar%2Fvscode-react-bootstrap-snippets","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjustinmahar%2Fvscode-react-bootstrap-snippets","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjustinmahar%2Fvscode-react-bootstrap-snippets/lists"}