react-alert-with-buttons
v0.0.18
Published
A library that creates alerts with clickable buttons
Downloads
6
Readme
react-alert-with-buttons
This is a react library that creates alerts.
You can customize your alerts with additional buttons.
Example
Prerequisite
You must have react
and react-dom
already installed in your project.
If you have not installed them, please install them by
$ npm install --save react react-dom
or
$ yarn add react react-dom
Installation
$ npm install --save react-alert-with-buttons
or
$ yarn add react-alert-with-buttons
Quickstart
1. (First Step) Wrap your App with AlertProvider
You must wrap your whole React app with AlertProvider.
Go to index.js and wrap it with AlertProvider
// index.js
import React from 'react'
import { render } from 'react-dom'
import { AlertProvider } from 'react-alert-with-buttons'
import App from './App'
const Root = () => (
<AlertProvider>
<App />
</AlertProvider>
)
render(<Root />, document.getElementById('root'))
2. (Second Step) Import useAlert hook and use open({message: ""})
method
After you have wrapped the AlertProvider in index.js, you can import useAlert hook anywhere in your page or component and show alerts.
You can show alerts using the open method(A message is required for opening an alert)
// App.js
import React from 'react'
import { useAlert } from 'react-alert-with-buttons'
const App = () => {
const alert = useAlert()
return (
<button
onClick={() => {
alert.open({
message: "This is an alert",
});
}}
>
Show Alert
</button>
)
}
Customization
Customize the alert container
Currently you can customize the containerStyle
, the defaultConfirmText
, and the buttonStyle
You can change the default styles and text by adding properties to the AlertProvider
// index.js
import React from 'react'
import { render } from 'react-dom'
import { AlertProvider } from 'react-alert-with-buttons'
import App from './App'
const Root = () => (
<AlertProvider
containerStyle={{ backgroundColor: "green" }}
defaultConfirmText="네"
buttonStyle={{ backgroundColor: "yellow" }}>
<App />
</AlertProvider>
)
render(<Root />, document.getElementById('root'))
The above code will result in
For your information there are only three properties that you can change in the AlertProvider for now.
AlertProvider Props
interface Props {
containerStyle?: CSSProperties;
defaultConfirmText?: string;
buttonStyle?: CSSProperties;
}
Customize buttons
By default, there is one confirm button for the alert.
You may add other buttons by adding buttons property in the open method.
// App.js
import React from 'react'
import { useAlert } from 'react-alert-with-buttons'
const App = () => {
const alert = useAlert()
return (
<button
onClick={() => {
alert.open({
message: "This is an alert",
buttons: [
{
label: "button1",
onClick: () => {
//implement your function here for the button1 click
alert.close() //Remeber that customly created button does not close the alert by default!
//You must add the close function manually!
},
},
{
label: "button2",
onClick: () => {
//implement your function here for the button2 click
alert.close() //Remeber that customly created button does not close the alert by default!
//You must add the close function manually!
},
},
],
});
}}
>
Show Alert
</button>
)
}
The buttons container is responsive. If the screen width is below 576px the buttons are algined vertically
The parameters of the open method are the following.
interface AlertProps {
message: string;
buttons?: AlertButtonProps[]; //optional, Array of AlertButtonProps
}
The following are the properties an element in the buttons array.
interface AlertButtonProps {
label: string;
onClick: Function;
style?: CSSProperties;
}
You can style your buttons if you want, adding style props in the button array allows you to style each button
// App.js
import React from 'react'
import { useAlert } from 'react-alert-with-buttons'
const App = () => {
const alert = useAlert()
return (
<button
onClick={() => {
alert.open({
message: "This is an alert",
buttons: [
{
label: "button1",
onClick: () => {
//implement your function here for the button1 click
alert.close() //Remeber that customly created button does not close the alert by default!
//You must add the close function manually!
},
style: { opacity: 0.5 },
},
{
label: "button2",
onClick: () => {
//implement your function here for the button2 click
alert.close() //Remeber that customly created button does not close the alert by default!
//You must add the close function manually!
},
style: {
backgroundColor: "green",
borderRadius: 15,
color: "white",
},
},
],
});
}}
>
Show Alert
</button>
)
}
Caution!!
The buttons that are customized do not close the alert when clicked! If you want to close the alert when you click the buttons, you must add the close function manually. The context returned by the useAlert hook gives you two methods: open
, close
. Calling close
will close the opened alert.
//Inside the React Component
const alert = useAlert()
...
alert.close() //There are no parameters required in the close method
Happy Coding!