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	0.11.0	import {Alert} from '@ciceksepeti/cui-alert'	import '@ciceksepeti/cui-alert/style.css'

Wai-AriaW3

RepositoryGitHub

PackageNPM

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

Type injected

info

type definition affects aria-live accessibility attribute. The aria-live=POLITENESS_SETTING is used to set the priority with which screen reader should treat updates to live regions - the possible settings are: off, polite or assertive.

In order to learn more about aria-live attribute please visit the aria-live reference page.

import { Alert } from '@ciceksepeti/cui-alert';

const Example = () => {
  return <Alert type='assertive'>I am an alert with 'assertive' type</Alert>;
};

PREVIEW

Default Version

I am an alert with 'assertive' type

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	polite	-	Represents aria-live type for accessibility.
children	React.ReactNode	-	required	The element which shows content of an Alert

Playground

Styling

Element Selector

tip

To learn more about selectors please visit the CSS Selector Reference page.

Name	Type
[data-cui-alert]	Element Selector