https://github.com/alekangelov/react-alert-async
A simple way of managing your alerts, prompts and confirms without defaulting to the browsers ugly implementations
https://github.com/alekangelov/react-alert-async
alerts confirms javascript modals react
Last synced: about 2 months ago
JSON representation
A simple way of managing your alerts, prompts and confirms without defaulting to the browsers ugly implementations
- Host: GitHub
- URL: https://github.com/alekangelov/react-alert-async
- Owner: alekangelov
- Created: 2020-08-15T23:20:43.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2021-08-26T01:40:45.000Z (almost 5 years ago)
- Last Synced: 2025-09-19T02:24:50.175Z (9 months ago)
- Topics: alerts, confirms, javascript, modals, react
- Language: JavaScript
- Homepage: https://alekangelov.github.io/react-alert-async/
- Size: 5.68 MB
- Stars: 3
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# react-alert-async
> A simple to use Alert/Confirmation system for React. On the server or the client.
[](https://www.npmjs.com/package/react-alert-async) [](https://standardjs.com)
## Installation
```bash
yarn add react-alert-async
```
## Usage
Honestly, it's as simple as one two three.
```tsx
import AlertProvider, { alert, confirm, prompt } from 'react-alert-async'
import 'react-alert-async/dist/index.css'
function App() {
return (
<>
alert("Yay, it's an alert", { duration: 2000, title: 'Custom Title' })
}
/>
>
)
}
```
## Styling
It's pretty easy to style the components, they follow simple naming structures and it's encouraged to write your own styles
```scss
.alert {
/* this is the background of the alert */
&-inner {
/* body wrapper of the alert */
}
&-title {
/* title of the alert */
}
&-text {
/* text describer of the alert */
}
&-input {
/* the prompt input field */
}
&-buttons {
/* button wrapper of the alert */
&_ok {
/* ok button of the alert */
}
&_cancel {
/* cancel button of the alert */
}
}
}
```
## Sample Components
All taken from the demo, but modified just a bit.
### Alert
```jsx
function Alert() {
const [state, setState] = useState("Nothing's been alerted")
return (
{state}
{
try {
const x = await alert('Idk write something meaningful here')
setState('Yay, so you read all that')
} catch (e) {
setState("Oh, we're sorry about that :(")
}
}}
>
Make an alert
)
}
```
### Prompt
```jsx
function Prompt() {
const [state, setState] = useState("Nothing's been prompted")
return (
{state}
{
try {
const x = await prompt("What's your name?")
setState('Your name is: ' + x)
} catch (e) {
setState('Oh dang, we didnt get your name :(')
}
}}
>
Make a prompt
)
}
```
### Confirm with custom buttons
```jsx
function Confirm() {
const [state, setState] = useState("Nothing's been confirmed, nor denied")
return (
{state}
{
try {
await confirm("Read some of the things we've written", {
okLabel: "I'm custom 🤯",
cancelLabel: "I'm custom too 😎"
})
setState('Yay, so you read all that')
} catch (e) {
setState("Oh, we're sorry about that :(")
}
}}
>
Make a confirm
)
}
```
### Custom Body
```jsx
{
try {
const x = await alert(
() => (
I'm the title?
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Esse, id sunt nulla nam praesentium necessitatibus
voluptate consequatur, nesciunt ut cupiditate distinctio
natus dolorem debitis adipisci non deleniti dolores rem
vitae.
),
{
duration: 500
}
)
setState('Yay, so you read all that')
} catch (e) {
setState("Oh, we're sorry about that :(")
}
}}
>
Make a Funcitonal Alert
{
try {
const x = await alert(
class extends React.Component {
render() {
return (
I'm the title?
Lorem ipsum dolor sit amet consectetur, adipisicing
elit. Esse, id sunt nulla nam praesentium
necessitatibus voluptate consequatur, nesciunt ut
cupiditate distinctio natus dolorem debitis adipisci
non deleniti dolores rem vitae.
)
}
},
{
duration: 500
}
)
setState('Yay, so you read all that')
} catch (e) {
setState("Oh, we're sorry about that :(")
}
}}
>
Make a Class Alert
```
## TODO
You can follow the project's board here: https://github.com/alekangelov/react-alert-async/projects/1
## License
MIT © [alekangelov](https://github.com/alekangelov)