Using Bootstrap 5 with React

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);
    const toastRef = useRef();

    useEffect(() => {
        var myToast = toastRef.current
        var bsToast = new Toast(myToast)
        toast ? bsToast.show() : false
        myToast.addEventListener('hidden.bs.toast', ()=>{
            setToast(false)
        })
    })

    return (
    

         setToast(toast => !toast)}>
            Show toast
        
        

            

                Bootstrap 5
                11 mins ago
                
            
            

              Hello, world! This is a toast message.
            
        
    
    )
}

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 (
    

        
            Toggle collapse
        
        

            This is the toggle-able content!
        
    
  )
}

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?

from Tumblr https://generouspiratequeen.tumblr.com/post/639095918643298304