An Interest In:
Web News this Week
- April 4, 2024
- April 3, 2024
- April 2, 2024
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
Using Bootstrap 5 with React
How to use the new Bootstrap 5 with React
Bootstrap and React have both been around for a while now, but now that the Bootstrap 5 beta is out, there's finally something to cheer about!
Now that Bootstrap 5 no longer requires jQuery, using it in your React app is much easier and with conflicts! Now that Bootstrap 5 components are written as vanilla JS plugins, you get improved alignment with React's best patterns & practices.
This also means it's possible to use Bootstrap 5 components without the need for a 3rd party library like react-bootstrap or reactstrap.
First up, add Bootstrap to your React app's package.json
:
npm install bootstrap --save
Once Bootstrap is included, you'll be able to import
components the way you do with any JS module. For example, let's import Bootstrap's Toast component...
import { Toast} from bootstrap
And then use it with React's useEffect
and useState
hooks...
function ToastDemo() { var [toast, setToast] = useState(false); useEffect(() => { var myToast = document.getElementById('myToast') var bsToast = new Toast(myToast) toast ? bsToast.show() : false myToast.addEventListener('hidden.bs.toast', ()=>{ setToast(false) }) }) return ( <div className="py-2"> <button className="btn btn-success" onClick={() => setToast(toast => !toast)}> Show toast </button> <div className="toast position-absolute top-0 end-0 m-4" role="alert" id="myToast"> <div className="toast-header"> <strong className="me-auto">My Toast!</strong> <button type="button" className="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> </div> <div className="toast-body"> Hello, world! This is a toast message. </div> </div> </div> )}
Or, (if that wasn't easy enough) use the new namespaced data-bs-
attributes directly in your markup. For example, let's use the Bootstrap 5 Collapse component...
function CollapseDemo() { return ( <div className="py-2"> <button className="btn btn-primary" data-bs-target="#collapseTarget" data-bs-toggle="collapse"> Toggle collapse </button> <div className="collapse" id="collapseTarget"> This is the toggle-able content! </div> </div> )}
Now you can easily use any of the Bootstrap 5 Components in your React project. Check out these Bootstrap 5 React examples that use the Bootstrap 5 Toast, Alert, Collapse, Modal, Tooltip and Popover. Also be sure to take a look at all the new updates in Bootstrap 5.
What do you think? Do you plan on bringing Bootstrap 5 into your next React project, or do you prefer a different React friendly design system?
Original Link: https://dev.to/codeply/is-bootstrap-5-react-worthy-4493
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To