This extension includes 806 React-Bootstrap snippets for VS Code.
Build apps with React-Bootstrap at your fingertips.
This extension supports:
- 🙌 All
react-bootstrap components. The complete picture.
import snippets, for quick and easy importing.
- 💁♀️ Example snippets from the docs for convenience.
- 🧰 Bootstrap utility CSS class snippets for even more convenience!
rb and press Ctrl+Space for autocompletion. VS Code will autocomplete the component you need.
Read below for more information and gif demos.
Loving it? Rate it here!
📚 Supported languages (file extensions)
- TypeScript (.ts)
- TypeScript React (.tsx)
2.7.0 (Bootstrap 5.2)
1.6.4 (Bootstrap 4.6)
In VS Code, press Cmd+Shift+P and run Extension: Install Specific Version of Extension... to install a specific version.
All snippets start with
rb for React-Bootstrap.
There are 806 snippets available for components, imports, examples, and utility CSS classes.
Read more on each below.
All React-Bootstrap's components are supported.
Where applicable, suggestions are made for which components to use inside a given component, such as
tbody inside a
Component import snippets are available for all React-Bootstrap components.
All imports begin with
rb:import followed by the component name. For example,
rb:import:row will import
Since it's such a common use case, you can also use
rb:import:grid to import
Col all at once.
Individual Import Snippets
According to the docs:
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.
All snippets for individual imports begin with
rb:import:only followed by the component name.
Where 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.
Example snippets all end with
rb:alert-example will insert an example
Alert to build upon.
Alert and Modal Functions
For convenience, function snippets are included for the show/hide functions needed for modals and dismissible alerts.
rb:modal-functions for the following:
const [showModal, setShowModal] = React.useState(false);
const handleCloseModal = () => setShowModal(false);
const handleShowModal = () => setShowModal(true);
rb:alert-dismissible-functions for the following:
const [showAlert, setShowAlert] = React.useState(false);
const handleCloseAlert = () => setShowAlert(false);
const handleShowAlert = () => setShowAlert(true);
These pair nicely with the snippets for
This extension includes utilities for tables so you can quickly build table headers and table rows.
X is the number of columns from 2-9, to quickly build rows in your
Bootstrap Utility CSS Class Snippets
Handy snippets are included for all Bootstrap utility CSS classes.
rb:utils prefix to quickly look up and use any of Bootstrap's utility classes while building.
A Note To You, The Developer
My 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.
That being said, if you find a bug or see a way to improve this extension, please feel free to open an issue or submit a pull request to the project.
If you found this extension helpful, consider rating it and give it a star so others can find it.
Happy coding 🖖
I hope this project makes your life a little easier! If it does and you'd like to show your appreciation, consider supporting the project with a coffee or sponsorship.
Your support helps keep the project going and will earn you some serious virtual high fives. Maybe even a virtual fist bump if you're feeling extra cool.
See the CHANGELOG for release notes.