Toast

Display brief, temporary notifications in an application.

http://localhost:3000

function Basic() {
  const handlePress = React.useCallback(() => {
    toast('Lorem ipsum dolor');
  }, []);

  return <Button onPress={handlePress}>Open Toast</Button>;
}

Usage

Before calling the toast function be sure to include the Toaster component in the root of your application.

import { Toaster } from '@project44-manifest/react';

function App({ children }) {
  return (
    <>
      <Toaster />
      {children}
    </>
  );
}

Duration

To adjust the time the toast appears on screen, use the duration prop.

http://localhost:3000

function Duration() {
  const handlePress = React.useCallback(() => {
    toast('Lorem ipsum dolor', {
      description:
        'consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
      duration: 5000,
    });
  }, []);

  return <Button onPress={handlePress}>Open Toast</Button>;
}

Position

Set toast position on the screen using the position prop.

http://localhost:3000

function Position() {
  const handlePress = React.useCallback(() => {
    toast('Lorem ipsum dolor', {
      position: 'bottom-left',
      description:
        'consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
    });
  }, []);

  return <Button onPress={handlePress}>Open bottom-left toast</Button>;
}

Description

Add additional information to a toast using the description prop.

http://localhost:3000

function Description() {
  const handlePress = React.useCallback(() => {
    toast('Lorem ipsum dolor', {
      description:
        'consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
    });
  }, []);

  return <Button onPress={handlePress}>Open Toast</Button>;
}

Actions

Include additional actions for a user to perform within a toast.

http://localhost:3000

function Actions() {
  const handlePress = React.useCallback(() => {
    toast('Lorem ipsum dolor', {
      action: <Button>Refresh Page</Button>,
      description:
        'consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
    });
  }, []);

  return <Button onPress={handlePress}>Open Toast</Button>;
}

Info

Create an informational toast using the info method.

http://localhost:3000

function Info() {
  const handlePress = React.useCallback(() => {
    toast.info('Lorem ipsum dolor', {
      description:
        'consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
    });
  }, []);

  return <Button onPress={handlePress}>Open Toast</Button>;
}

Success

Create an success toast using the success method.

http://localhost:3000

function Success() {
  const handlePress = React.useCallback(() => {
    toast.success('Lorem ipsum dolor', {
      description:
        'consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
    });
  }, []);

  return <Button onPress={handlePress}>Open Toast</Button>;
}

Warning

Create an warning toast using the warning method.

http://localhost:3000

function Warning() {
  const handlePress = React.useCallback(() => {
    toast.warning('Lorem ipsum dolor', {
      description:
        'consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
    });
  }, []);

  return <Button onPress={handlePress}>Open Toast</Button>;
}

Error

Create an error toast using the error method.

http://localhost:3000

function Error() {
  const handlePress = React.useCallback(() => {
    toast.error('Lorem ipsum dolor', {
      description:
        'consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
    });
  }, []);

  return <Button onPress={handlePress}>Open Toast</Button>;
}

Props

---

as?The root element to be rendered