HDTuto.com

How to Use Bootstrap Toast in React?



Today our leading topic is react bootstrap tab example. let’s discuss about bootstrap toast in react example. This article goes in detailed on bootstrap toast example react. i would like to show you simple bootstrap toast react native.

I will show you how to use bootstrap toast in react application. you have to just simple follow few step to done simple example of bootstrap toast in react js. in this example we will install react-bootstrap and use their toast class to toast in react app.

just follow few step to add bootstrap toast in react native app.

Preview:

Install react-bootstrap

Now here, we have to install bootstrap using npm react-bootstrap command. so let's run bellow command to install bootstrap in react.

npm install react-bootstrap bootstrap

After successfully install bootstrap, we need to import bootstrap css in src/index.js file as like bellow:

import 'bootstrap/dist/css/bootstrap.css';

src/index.js

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import App from './App';

import * as serviceWorker from './serviceWorker';

import 'bootstrap/dist/css/bootstrap.css';

ReactDOM.render(

<React.StrictMode>

<App />

</React.StrictMode>,

document.getElementById('root')

);

serviceWorker.unregister();

Bootstrap Tabs Code

in our App.js file, we will write code for open simple bootstrap 4 toast using react-bootstrap library.

Import Button, Toast from react-bootstrap library.

let's add bellow code:

src/App.js

import React, {useState} from 'react';

import logo from './logo.svg';

import './App.css';

import { Button, Toast } from 'react-bootstrap';

function App() {

const [show, setShow] = useState(false);

return (

<div className="container">

<h1>React Bootstrap Toast Example - HDTuto.com</h1>

<Toast onClose={() => setShow(false)} show={show} delay={2000} autohide>

<Toast.Header>

<strong className="mr-auto">Bootstrap Toast</strong>

<small>11 mins ago</small>

</Toast.Header>

<Toast.Body>This is simple Bootstrap Toast Example</Toast.Body>

</Toast>

<Button onClick={() => setShow(true)}>Click to Show Toast</Button>

</div>

);

}

export default App;

Now we are ready to run our example by bellow command:

npm start

Now you can check it. it's layout as like above.

I hope it can help you...




May 26, 2020 | Category : React



Blog Search


Copyright © 2020 HDTuto.com. All rights reserved.