npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-alert-with-buttons

v0.0.18

Published

A library that creates alerts with clickable buttons

Downloads

7

Readme

react-alert-with-buttons

This is a react library that creates alerts.

You can customize your alerts with additional buttons.

Example

alert-modal-high

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!