React-Bootstrap Alerts API
React-bootstrap is a front-End Stylesheet library. It replaces the Bootstrap JavaScript into completely a react component. It creates a seamless front-end development experience. In this article, we will see React Bootstrap Alerts API.
The alert components help to show messages for typical user actions.
Alerts API props:
- bsPrefix: The changes the component’s CSS base class name and modifier class names prefix.
- variant: It helps to add the visual variant to the component. We can chose among any of the given options ‘including primary’, ‘secondary’, ‘success’, ‘danger’, ‘warning’, ‘info’, ‘dark’, ‘light’.
- dismissible: It is a boolean value that renders a properly aligned dismiss button and adds extra padding to the component.
- show: It is a boolean value that determines the visual state of the Alert.
- onClose: It is a callback function which gets triggered when the alert is closed.
- closeLabel: It determines the text for alert close button.
- closeVariant: It determines the variant for close button.
- transition: It helps to add a transition animation to the alert component.
Syntax:
<Alert>...</Alert>
Steps to create React Application And Installing Module:
Step 1: Create a React application by running the give command:
npx create-react-app foldername
Step 2: After creating your project folder i.e. foldername, change your directory to created project directory:
cd foldername
Step 3: After creating the your application, Install the react-bootstrap module using the following command:
npm install react-bootstrap bootstrap
Project Structure:
Example 1: We are creating an alert component by using the key and the variant prop in the App.js file
Javascript
import Alert from "react-bootstrap/Alert" ; import "bootstrap/dist/css/bootstrap.min.css" ; function App() { return ( <div className= "App text-center" > <h1 class= "text-success" >w3wiki</h1> <h3>React-Bootstrap Alerts API</h3> <Alert key={ "success" } variant= "success" > Welcome to w3wiki! </Alert> </div> ); } export default App; |
Output:
Ecample 2: In this example, we are adding a button with an onClick function that changes the state of the custom hook showAlert, which gets passed to the show prop of the Alert Component.
Javascript
import Alert from "react-bootstrap/Alert" ; import "bootstrap/dist/css/bootstrap.min.css" ; import { Button } from "react-bootstrap" ; import { useState } from "react" ; function App() { const [showAlert, setShowAlert] = useState(); const onClickHandler = () => { setShowAlert(!showAlert); }; return ( <div className= "App text-center" > <h1 class= "text-success" >w3wiki</h1> <h3>React-Bootstrap Alerts API</h3> <Alert key= "welcome-text" variant= "warning" dismissible onClose={onClickHandler} show={showAlert} > Welcome to w3wiki! </Alert> <Button onClick={onClickHandler}>Show Alert</Button> </div> ); } export default App; |
Output:
Contact Us