alertz v1.1.0

Alertz

• Customize Alert & 2 Options

Preview

Setup

npm install alertz

or

yarn add alertz

Usage

Alert

• type="alert" (default)

import { useState } from 'react';
import { Alertz } from 'alertz';

function App() {
  const [open, setOpen] = useState(false);

  const handleClick = () => {
    setOpen(!open);
  };
  return (
    <div>
      <button onClick={handleClick}>Click</button>
      <Alertz show={open} buttonB={{ onClick: handleClick }} />
    </div>
  );
}

export default App;

2 Options

• type="confirm"

import { useState } from 'react';
import { Alertz } from 'alertz';

function App() {
  const [open, setOpen] = useState(false);

  const handleClick = () => {
    setOpen(!open);
  };
  return (
    <div>
      <button onClick={handleClick}>Click</button>
      <Alertz type="confirm" show={open} buttonB={{ onClick: handleClick }} />
    </div>
  );
}

export default App;

Customize

• Dark (Default) & Light Mode

<Alertz type="confirm" mode="light" title="Are You Sure ?" show={open} />

• titleColor & bgColor

<Alertz
  bgColor="indigo"
  titleColor="yellow"
  type="confirm"
  title="Are You Sure ?"
  show={open}
/>

• buttonsDirection="column" (default row)

<Alertz
  type="confirm"
  buttonsDirection="column"
  title="Are You Sure ?"
  show={open}
  buttonB={{ title: 'Confirm' }}
  buttonA={{ title: 'Cancel' }}
/>