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?