setStatus(false)}\r\n/>\r\n```\r\n\r\n---\r\n\r\n## ⚙️ Available Props\r\n\r\n| Prop Name | Type | Description | Required |\r\n|-----------------|-----------|------------------------------------------------|:---------:|\r\n| `status` | Boolean | Controls alert visibility (`true` / `false`) | **Yes** |\r\n| `title` | String | Main message text displayed as title | **Yes** |\r\n| `type` | String | Alert type: choose one of the option from **`Available Alert Types`** | **Yes** |\r\n| `color` | String | Custom background color (`Hex code e.g. #de1327`) | No |\r\n| `isQuotes` | Boolean | Displays additional quote text (`true` / `false`) | No |\r\n| `quote` | String | The additional quote message if `isQuotes = true` | No |\r\n| `button` | String | Custom button text (`e.g. \"Try Again\", \"Submit\"`) | No |\r\n| `autoCloseIn` | Number | Automatically close the alert after X milliseconds | No |\r\n| `Close` (method) | Function | Callback method to manually close the alert | **Yes** |\r\n\r\n---\r\n\r\n## 📸 Example Screenshot\r\n\r\n\r\n\r\n---\r\n\r\n## 📋 How to Use\r\n\r\n`reactjs-alert` provides an intuitive way to display alerts for different types like **success**, **warning**, **error**, and **info**. \r\n\r\nSimply import the component and configure it using the available props.\r\n\r\n### Class Component Example\r\n\r\n```jsx\r\nimport React, { Component } from \"react\";\r\nimport ReactJsAlert from \"reactjs-alert\";\r\n\r\nexport default class App extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n type: \"success\",\r\n status: true,\r\n title: \"Hey! This is a success alert.\",\r\n };\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n this.setState({ status: false })}\r\n />\r\n
\r\n );\r\n }\r\n}\r\n```\r\n\r\n---\r\n\r\n### Functional Component Example\r\n\r\n```jsx\r\nimport React, { useState } from \"react\";\r\nimport ReactJsAlert from \"reactjs-alert\";\r\n\r\nexport default function App() {\r\n const [status, setStatus] = useState(false);\r\n const [type, setType] = useState(\"success\");\r\n const [title, setTitle] = useState(\"This is a success alert\");\r\n\r\n return (\r\n \r\n {\r\n setStatus(true);\r\n setType(\"success\");\r\n setTitle(\"This is a success alert\");\r\n }}\r\n >\r\n Show Alert\r\n \r\n\r\n setStatus(false)}\r\n />\r\n
\r\n );\r\n}\r\n```\r\n\r\n---\r\n\r\n## 🔗 Peer Dependencies\r\n\r\nEnsure these dependencies are present in your project:\r\n\r\n```json\r\n\"peerDependencies\": {\r\n \"react\": \"^16.13.1\",\r\n \"react-dom\": \"^16.13.1\"\r\n}\r\n```\r\n\r\n---\r\n\r\n## 💻 Example with Multiple Alerts\r\n\r\n### Class Component Example\r\n\r\n```jsx\r\nimport React, { Component } from \"react\";\r\nimport ReactJsAlert from \"reactjs-alert\";\r\n\r\nexport default class App extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n type: \"error\",\r\n status: true,\r\n title: \"Oops! Something went wrong.\",\r\n };\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n this.setState({ status: false })}\r\n />\r\n
\r\n );\r\n }\r\n}\r\n```\r\n\r\n---\r\n\r\n### Functional Component Example\r\n\r\n```jsx\r\nimport React, { useState } from \"react\";\r\nimport ReactJsAlert from \"reactjs-alert\";\r\n\r\nexport default function App() {\r\n const [status, setStatus] = useState(false);\r\n const [type, setType] = useState(\"\");\r\n const [title, setTitle] = useState(\"\");\r\n\r\n return (\r\n \r\n {\r\n setStatus(true);\r\n setType(\"info\");\r\n setTitle(\"This is an info alert!\");\r\n }}\r\n >\r\n Show Info Alert\r\n \r\n\r\n setStatus(false)}\r\n />\r\n
\r\n );\r\n}\r\n```\r\n\r\n---\r\n\r\n## 🤝 Contributing\r\n\r\nContributions are welcome! If you have suggestions, improvements, or feature requests, feel free to fork the repository, raise issues, or submit pull requests.\r\n\r\n---\r\n\r\n## ⭐ Support\r\n\r\nIf you find this package helpful, consider giving it a ⭐ on [GitHub](https://github.com/sourav-oss).\r\n\r\n---\r\n\r\n## 📢 Follow Me\r\n\r\nFor updates, projects, and announcements, follow me on [Linkedin](https://in.linkedin.com/in/sourav-dutta-133a95149).\r\n\r\nYou can also follow me on [Twitter](https://twitter.com/_DuttaSourav).\r\n\r\n---\r\n\r\n**Built with ❤️ by Sourav Dutta 😊**\r\n\r\n### Happy Coding! 🚀\r\n","readmeFilename":"README.md"}