Alert

v.5.0.1

Installation

yarn

yarn add @mercell/alert-react

pnpm

pnpm add @mercell/alert-react

npm

npm install --save @mercell/alert-react

The Alert has necessary peerDependencies, please make sure that you have them in your project

"@carbon/icons-react": "^10.49.0",
"@mercell/close-button-react": "^5.0.0",
"@mercell/tailwind": "^6.0.1",
"classnames": "^2.3.1",
"react": "^17.0.2" 

Usage

Using the Alert component is as simple as importing it like this.

import { Alert, AlertText, AlertTitle } from '@mercell/alert-react';

Live Editor

// You can play with code, with HTML tags and text as much as you want! const AutoClosingAlertWrapper = () => { const [showAlert, setShowAlert] = React.useState(true) return ( <> {showAlert && <Alert scheme="error" showCloseButton closeAlertCallback={() => setShowAlert(false)} timeout={10000} > <AlertTitle>This alert will automatically close after 10 seconds</AlertTitle> </Alert> } </> ) } const NormalAlertWrapper = () => { const [showAlert, setShowAlert] = React.useState(true) return ( <> {showAlert && <Alert scheme="important" > <AlertTitle>A normal Alert without a close button</AlertTitle> <AlertText>This is a text inside alert</AlertText> </Alert> } </> ) } const ImportantAlertWrapper = () => { const [showAlert, setShowAlert] = React.useState(true) return ( <> {showAlert && <Alert scheme="important" showCloseButton closeAlertCallback={() => setShowAlert(false)} > <AlertTitle>An important alert with a close button</AlertTitle> </Alert> } </> ) } const ConfirmationAlertWrapper = () => { const [showAlert, setShowAlert] = React.useState(true) return ( <> {showAlert && <Alert scheme="success" showCloseButton closeAlertCallback={() => setShowAlert(false)} > <AlertTitle>A confirmation alert with a close button</AlertTitle> </Alert> } </> ) } const ErrorAlertWrapper = () => { const [showAlert, setShowAlert] = React.useState(true) return ( <> {showAlert && <Alert scheme="error" showCloseButton closeAlertCallback={() => setShowAlert(false)} > <AlertTitle>An error alert with a close button</AlertTitle> </Alert> } </> ) } const InformativeAlertWrapper = () => { const [showAlert, setShowAlert] = React.useState(true) return ( <> {showAlert && <Alert scheme="information" showCloseButton closeAlertCallback={() => setShowAlert(false)} > <AlertTitle>An informative alert with a close button</AlertTitle> </Alert> } </> ) } render ( <div className="space-y-4"> <AutoClosingAlertWrapper/> <NormalAlertWrapper/> <ImportantAlertWrapper/> <ConfirmationAlertWrapper/> <ErrorAlertWrapper/> <InformativeAlertWrapper/> </div> )

// You can play with code, with HTML tags and text as much as you want!
const AutoClosingAlertWrapper = () => {
    const [showAlert, setShowAlert] = React.useState(true)
    return (
        <>
            {showAlert &&
                <Alert
                    scheme="error"
                    showCloseButton
                    closeAlertCallback={() => setShowAlert(false)}
                    timeout={10000}
                >
                    <AlertTitle>This alert will automatically close after 10 seconds</AlertTitle>
                </Alert>
            }
        </>
    )
}
const NormalAlertWrapper = () => {
    const [showAlert, setShowAlert] = React.useState(true)
    return (
        <>
            {showAlert &&
                <Alert
                    scheme="important"
                >
                    <AlertTitle>A normal Alert without a close button</AlertTitle>
                    <AlertText>This is a text inside alert</AlertText>
                </Alert>
            }
        </>
    )
}
const ImportantAlertWrapper = () => {
    const [showAlert, setShowAlert] = React.useState(true)
    return (
        <>
            {showAlert &&
                <Alert
                    scheme="important"
                    showCloseButton
                    closeAlertCallback={() => setShowAlert(false)}
                >
                    <AlertTitle>An important alert with a close button</AlertTitle>
                </Alert>
            }
        </>
    )
}
const ConfirmationAlertWrapper = () => {
    const [showAlert, setShowAlert] = React.useState(true)
    return (
        <>
            {showAlert &&
                <Alert
                    scheme="success"
                    showCloseButton
                    closeAlertCallback={() => setShowAlert(false)}
                >
                    <AlertTitle>A confirmation alert with a close button</AlertTitle>
                </Alert>
            }
        </>
    )
}
const ErrorAlertWrapper = () => {
    const [showAlert, setShowAlert] = React.useState(true)
    return (
        <>
            {showAlert &&
                <Alert
                    scheme="error"
                    showCloseButton
                    closeAlertCallback={() => setShowAlert(false)}
                >
                    <AlertTitle>An error alert with a close button</AlertTitle>
                </Alert>
            }
        </>
    )
}
const InformativeAlertWrapper = () => {
    const [showAlert, setShowAlert] = React.useState(true)
    return (
        <>
            {showAlert &&
                <Alert
                    scheme="information"
                    showCloseButton
                    closeAlertCallback={() => setShowAlert(false)}
                >
                    <AlertTitle>An informative alert with a close button</AlertTitle>
                </Alert>
            }
        </>
    )
}
render (
    <div className="space-y-4">
        <AutoClosingAlertWrapper/>
        <NormalAlertWrapper/>
        <ImportantAlertWrapper/>
        <ConfirmationAlertWrapper/>
        <ErrorAlertWrapper/>
        <InformativeAlertWrapper/>
    </div>
)

Result

Types, definitions, etc.

Types

AlertProps

interface AlertProps {
    iconProps?: CarbonIconProps;
    scheme: FunctionScheme;
    timeout?: number;
    closeAlertCallback?: () => void;
    role: JSX.IntrinsicElements['div']['role'];
} & JSX.IntrinsicElements['div']

Name	Type	Default	Required	Description
iconProps	CarbonIconProps	-	yes	all possible properties allowed by CarbonIconProps
scheme	FunctionScheme	-	yes	Scheme to select the color of the alert
timeout	number	-	no	Time in ms to close the alert automatically. Ex. set to 5000 to automatically close after 5 seconds
closeAlertCallback	function	-	no	What to trigger in the close buttons onClick
role	JSX.IntrinsicElements['div']['role']	-	yes	Setting up role for accessibility based on 'role' props for 'div' tag

AlertTitleProps

AlertTitle has JSX.IntrinsicElements['h3'] type

AlertTextProps

AlertText has JSX.IntrinsicElements['div'] type

FunctionScheme

type FunctionScheme<T = ''> =
    | 'information'
    | 'success'
    | 'error'
    | 'important'
    | 'default'
    | T;

Name	Type	Default	Required	Description
FunctionScheme	'information' | 'success' | 'error' | 'important' | T	-	-	Scheme to select the color of the alert

Changelog

Change Log - @mercell/alert-react

This log was last generated on Wed, 01 Mar 2023 14:20:56 GMT and should not be manually modified.

5.0.1

Wed, 01 Mar 2023 14:20:56 GMT

Patches

• alert closeButton

5.0.0

Fri, 11 Nov 2022 09:18:57 GMT

Breaking changes

• New styling approach - use only tailwind classes, add tailwind-merge library

4.0.0

Thu, 15 Sep 2022 06:07:41 GMT

Breaking changes

• Migration to Tailwind3, React 18 and ViteJS from webpack.

3.0.9

Fri, 26 Aug 2022 12:26:09 GMT

Patches

• Fix width of children container to match max width based on rest space - icon size on the left

3.0.8

Thu, 30 Jun 2022 10:57:49 GMT

Patches

• Package.json refactor, add test suite, more tests soon

3.0.7

Mon, 30 May 2022 07:22:23 GMT

Patches

• Change important color to use new one from tailwind config

3.0.6

Fri, 08 Apr 2022 10:19:50 GMT

Patches

• Bump dependencies

3.0.5

Mon, 28 Feb 2022 12:45:49 GMT

Patches

• Dependency update

3.0.4

Mon, 28 Feb 2022 10:55:32 GMT

Patches

• Bump typescript

3.0.3

Wed, 26 Jan 2022 16:19:19 GMT

Patches

• Move dependencies to peerDependencies to avoid duplication in installation process in project
• Adding the same peerDependencies to devDependencies

3.0.2

Fri, 14 Jan 2022 11:55:11 GMT

Patches

• Fix clone method to pass all props to children in alert sub components

3.0.1

Thu, 06 Jan 2022 08:58:14 GMT

Patches

• Delete unnecessary property

3.0.0

Wed, 15 Dec 2021 22:20:34 GMT

Breaking changes

• Update to match figma design

2.0.6

Fri, 12 Nov 2021 13:08:30 GMT

Patches

• Add @mercell/tailwind to devDeps to be always up to date

2.0.5

Fri, 05 Nov 2021 11:10:13 GMT

Patches

• Bump peerDependency

2.0.4

Thu, 04 Nov 2021 10:10:16 GMT

Patches

• Tailwind type fix
• Revert tailwind version

2.0.3

Wed, 03 Nov 2021 15:28:42 GMT

Patches

• react types >=17

2.0.2

Wed, 27 Oct 2021 12:53:13 GMT

Patches

• Gitignore fix

2.0.1

Mon, 18 Oct 2021 11:57:57 GMT

Patches

• Fixed positioning of the closebutton

2.0.0

Mon, 18 Oct 2021 07:16:21 GMT

Breaking changes

• New local build process with webpack without storybook, add npmignore and update dependencies

1.1.1

Thu, 14 Oct 2021 08:47:25 GMT

Patches

• Fix dependency

1.1.0

Tue, 12 Oct 2021 11:37:45 GMT

Minor changes

• Added 3 new props(showCloseButton,timeout,closeAlertCallback) to give the ability to auto close after a ce

1.0.14

Tue, 14 Sep 2021 08:59:32 GMT

Patches

• Move tailwind to peer deps

1.0.13

Mon, 12 Jul 2021 10:50:09 GMT

Patches

• Updating dependencies
• Updating dependencies

1.0.12

Wed, 07 Jul 2021 09:56:37 GMT

Version update only

1.0.11

Wed, 24 Mar 2021 10:17:01 GMT

Patches

• Enabling eslint

1.0.10

Tue, 23 Mar 2021 13:40:42 GMT

Patches

• Adding esm module export

1.0.9

Wed, 17 Mar 2021 10:01:28 GMT

Patches

• Adding readme

1.0.8

Thu, 25 Feb 2021 07:02:16 GMT

Version update only

1.0.7

Wed, 24 Feb 2021 11:34:29 GMT

Version update only

1.0.6

Fri, 19 Feb 2021 09:41:17 GMT

Patches

• bump

1.0.5

Wed, 17 Feb 2021 11:56:13 GMT

Patches

• Exporting named

1.0.4

Mon, 15 Feb 2021 14:31:25 GMT

Version update only

1.0.3

Mon, 15 Feb 2021 10:36:20 GMT

Patches

• Styles now part of tailwind plugin

1.0.2

Tue, 09 Feb 2021 09:25:03 GMT

Patches

• bump

1.0.1

Fri, 05 Feb 2021 09:50:54 GMT

Patches

• target es5

1.0.0

Wed, 03 Feb 2021 07:57:36 GMT

Breaking changes

• Adding component

Figma

Sometimes it can take some time until Figma will render component inside embed iframe. Try to click plus icon to 'reset' initial loader. (Works only in Chrome)

Click me to open figma in the new card