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

$ yarn add react react-dom

Installation

$ npm install --save react-alert-with-buttons

$ 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!