Feedback Messages

Prerequisites

Add FeedbackMessages component anywhere in your application. Note that:

• You do not need to wrap your application with FeedbackMessages component – it is not a provider, it is a regular component
• You should not render multiple FeedbackMessages components – if you do that, your messages will be duplicated

  import { FeedbackMessages } from '@ocean-network-express/magenta-ui/react';
  function Demo() {
  return (
      <>
      <FeedbackMessages />
      {/* Your app here */}
      </>
  )
  }

All set! You can now use all FeedbackMessages system features.

import { Button, FeedbackMessages, message } from '@ocean-network-express/magenta-ui/react';

export function Prerequisites() {
  return (
    <>
      <FeedbackMessages />
      <Button onClick={() => message('This is a default message')}>Show Toast</Button>
    </>
  );
}

• The most basic usage of the FeedbackMessages component is to show a toast message. You can do this by calling the message function with a string as an argument. The message will be displayed in the top right corner of the screen.

Variants

• The message function supports different message types.
• You can use the alert, banner, and toast to display different types of messages.
• Default type is toast.

import { InfoCircleOutline } from '@ocean-network-express/magenta-ui/icons';
import {
  Button,
  FeedbackMessages,
  FeedbackMessageType,
  message,
} from '@ocean-network-express/magenta-ui/react';

export function Variants({ includeFB = false }: { includeFB?: boolean }) {
  return (
    <div
      style={{

Sizes

• FeedbackMessages supports sizes sizes sm, md, lg, responsive, and can be changed by passing the size value.

• Default size is lg.

  Source Code

  Copy Code

  <FeedbackMessages size="responsive" />

• You also override another size through message function.

      import { Button, message} from '@ocean-network-express/magenta-ui/react';
      function Demo() {
        return (
            <Button variant="outline" onClick={
              () => message('This is a red message', { size: 'md' })
            }>Click here</Button>
        )
      }

Colors

• The message function supports 5 colors red, green, blue, orange and neutral and can be changed by passing the color value.
• Default color is blue.

import {
  Button,
  FeedbackMessageColor,
  FeedbackMessages,
  message,
} from '@ocean-network-express/magenta-ui/react';

const upperFirst = (str: string) => str.charAt(0).toUpperCase() + str.slice(1);

type FeedbackColor = (typeof FeedbackMessageColor)[keyof typeof FeedbackMessageColor];

const ColorOptions = Object.values(FeedbackMessageColor).map((color) => ({

Positions

• The message function supports 6 positions top-left, top-right, top-center, bottom-left, bottom-right and bottom-center and can be changed by passing the position prop.
• Default position is top-right.

import {
  Button,
  FeedbackMessagePosition,
  FeedbackMessages,
  message,
} from '@ocean-network-express/magenta-ui/react';

const upperFirst = (str: string) => str.charAt(0).toUpperCase() + str.slice(1);

export function Positions({ includeFB = false }: { includeFB?: boolean }) {
  const PositionOptions = Object.values(FeedbackMessagePosition).map((position) => ({
    label: position.split('-').map(upperFirst).join(' '),

• Another way to change the position of the message is passing the position prop to the FeedbackMessages component.
• It will change the default position of all messages in the app.

import { FeedbackMessages, FeedbackMessagePosition } from '@ocean-network-express/magenta-ui/react';
      function Demo() {
        return (
          <>
            <FeedbackMessages position={FeedbackMessagePosition.BOTTOM_CENTER} />
            {/* Your app here */}
          </>
        )
      }

Prefix Icon

• The message function supports icons from the @ocean-network-express/magenta-ui/icons package.
• The prop icon support to add icon or other content to the left side.

import { InfoCircleOutline } from '@ocean-network-express/magenta-ui/icons';
import { Button, FeedbackMessages, message } from '@ocean-network-express/magenta-ui/react';

export function PrefixIcon({ includeFB = false }: { includeFB?: boolean }) {
  return (
    <>
      <Button
        onClick={() =>
          message('This is a Prefix Icon message', {
            icon: <InfoCircleOutline />,
          })
        }

Actions

• message function can include links by passing the urls or actions value depending on which type of message you are using.

Action Buttons

• The message function supports action buttons. You can add action buttons by passing the actions value.

• The actions value is an array of objects with the following properties:

  • label: The text to display on the button.
  • All other props are the same as the Button component.
  • Some default props in the action button are color is secondary, variant is outline, and size is md.

• Note: The actions value is only available for banner and toast types.

import { Button, FeedbackMessages, message } from '@ocean-network-express/magenta-ui/react';

export function Actions({ includeFB = false }: { includeFB?: boolean }) {
  return (
    <div
      style={{
        display: 'flex',
        gap: '1rem',
      }}
    >
      <Button
        onClick={() =>

Links

• The message function can include links by passing the urls value.

• The urls value is an array of objects with the following properties:

  • displayText: The text to display on the link.
  • All other props are the same as the Link component.

• Note: The urls value is only available for alert and banner types.

import { Button, FeedbackMessages, message } from '@ocean-network-express/magenta-ui/react';

export function ActionsLinks({ includeFB = false }: { includeFB?: boolean }) {
  return (
    <div
      style={{
        display: 'flex',
        gap: '1rem',
      }}
    >
      <Button
        onClick={() =>

Custom Links and Actions

You can custom links and actions by passing custom React components.

import {
  Button,
  FeedbackMessages,
  Link,
  message,
  Tag,
  TagContent,
} from '@ocean-network-express/magenta-ui/react';

export function CustomLinks({ includeFB = false }: { includeFB?: boolean }) {
  const CustomComponent = () => (
    <>

Close A Message

Remove Close Icon Button

• The message function can remove the close button icon or by setting the closable value to false.

import { Button, FeedbackMessages, message } from '@ocean-network-express/magenta-ui/react';

export function CloseIcon({ includeFB = false }: { includeFB?: boolean }) {
  return (
    <>
      <Button
        onClick={() =>
          message('This is a Un-Closable message', {
            closable: false,
          })
        }
      >

Close duration

• By default, the messages will close automatically after 10 seconds.
• The message function can include the close duration by passing the duration value.

import { Button, FeedbackMessages, message } from '@ocean-network-express/magenta-ui/react';

export function Duration({ includeFB = false }: { includeFB?: boolean }) {
  return (
    <>
      <Button
        onClick={() =>
          message('This is a 2000ms duration message', {
            duration: 2000,
          })
        }
      >

• To prevent the messages from closing automatically, set the duration value to 0 or Infinity.

import { Button, FeedbackMessages, message } from '@ocean-network-express/magenta-ui/react';

export function DurationInfinity({ includeFB = false }: { includeFB?: boolean }) {
  return (
    <>
      <Button
        onClick={() =>
          message('This is a not auto close message', {
            duration: 0,
            closable: true,
          })
        }

• Another way to change the duration of the message is passing the duration prop to the FeedbackMessages component.
• It will change the default duration of all messages in the app.

import { FeedbackMessages } from '@ocean-network-express/magenta-ui/react';
      function Demo() {
        return (
          <>
            <FeedbackMessages duration={2000} />
            {/* Your app here */}
          </>
        )
      }

Placement

• Customize the placement of messages by using the style prop on the FeedbackMessages component. This will modify the default offset for all messages.
• A common use case here is to display new notifications 48px below the navigation bar.

<div>
{/* Your navigation bar here */}
<Button
  onClick={() =>
    message('Service wait times', {
      type: FeedbackMessageType.ALERT,
      icon: <WarningOutline />,
      message: 'We are experiencing longer than normal wait times at this location',
      color: FeedbackMessageColor.ORANGE,
    })
  }
>

TypeScript

• FeedbackMessageType, FeedbackMessageColor ,and FeedbackMessagePosition are EnumValues exported from @ocean-network-express/magenta-ui/react.

import { FeedbackMessageType, FeedbackMessageColor, FeedbackMessagePosition } from '@ocean-network-express/magenta-ui/react';