alertz
v1.1.0
Published
- Customize Alert & 2 Options
Downloads
6
Readme
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} />
| mode="dark" | mode="light" | | :------------------------------------------ | :------------------------------------------: | | | |
- 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' }}
/>