Alert
An alert is an element that displays a brief, important message in a way that attracts the user's attention without interrupting the user's task.
install | version | usage | style |
---|---|---|---|
yarn add @ciceksepeti/cui-alert | 1.0.0 | import {Alert} from '@ciceksepeti/cui-alert' | import '@ciceksepeti/cui-alert/style.css' |
Content​
Alert component displays an important/unimportant message to get the user's attention without interrupting the user. It is mainly focused on web accessibility. Thus, with aria-live and role attributes, we try to ensure that many assistive technologies announce the message to users according to the notification level specified by the developer.
Examples​
Example of a default behavior of AlertDialog component. Renders as 'div' by default.
Default​
import { Alert } from '@ciceksepeti/cui-alert';
const Example = () => {
return <Alert>I am an alert</Alert>;
};
PREVIEW
Default Version
I am an alert
Manually Rendered​
import { useState } from 'react';
import { Alert } from '@ciceksepeti/cui-alert';
const Example = () => {
const [count, setCount] = useState(0);
return (
<section aria-label="alert component manually mounted">
<button onClick={() => setCount(count + 1)}>Add Alert</button>
{count > 0 && <Alert>{`I am an alert! (${count})`}</Alert>}
</section>
);
};
PREVIEW
Manually Rendered Version
Async​
import { useState } from 'react';
import { Alert } from '@ciceksepeti/cui-alert';
const Example = () => {
const [alerts, setAlerts] = useState([]);
const onAddAlert = () => {
setTimeout(() => {
setAlerts((oldAlerts) => {
const updatedAlerts = [
...oldAlerts,
`I am an alert (${oldAlerts.length + 1})`,
];
return updatedAlerts;
});
}, 100);
};
const onRemoveAlert = () => {
setAlerts((oldAlerts) => {
const [, ...rest] = oldAlerts;
return rest;
});
};
return (
<section aria-label="alert component mounted with setTimeout, async">
<div>
<button onClick={onAddAlert}>Add Alert</button>
<button onClick={onRemoveAlert}>Remove Alert</button>
</div>
{alerts.map((each, index) => (
<Alert key={each + index}>{each}</Alert>
))}
</section>
);
};
PREVIEW
Async Version
Props​
Name | Type | Default | Required | Description |
as | string | div | - | Changes html tag of portal component which renders to DOM |
type | polite | assertive | off | info | - | Type for accessibility |
children | React.ReactNode | - | required | The element which shows content of an Alert |